IsometricSassを使って3D表現をやってみる

IsometricSassを使うとcssのみで3D表現できるので、それをいろいろとさわってみる。

参考url一覧

github

github.com

やっていることの参考url

IsometricSass

行ったこと

事前準備

HTML : html

CSS : sass（isometricがsassを使っているので、)

sassビルド : Easy Sass（参考url）

isometricをローカルに入れる

https://github.com/MorganCaron/IsometricSass/blob/master/src/sass/_isometric.sassのファイルを自分のcssファイルと同じ場所に入れる

ディレクトリ

Context

html

<div class="isometric-container">
  <div class="isometric">
    2d <br>Isometric
  </div>
</div>

sass

@import isometric

結果

Grid

html

<div class="isometric-container">
  <div class="isometric">
    <div class="grid"></div><!--ここを変更-->
  </div>
</div>

sass

@import isometric

// ここから追記
$size: 5rem

.grid
    +grid($size, 1%, mediumorchid)
    width: $size*5
    height: $size*5

自分の環境だと $size: 1rem だとサイズが小さくて見えなかったので、5remに変更。

結果

Plane

html

<div class="isometric-container">
  <div class="isometric">
    <div class="plane"></div> <!--ここを変更-->
  </div>
</div>

sass

@import isometric

// ここから追記
$size: 5rem

.plane
  +plane($size, $size, darkcyan)

結果

Border

html

<div class="isometric-container">
  <div class="isometric">
    <div class="plane"></div>
  </div>
</div>

sass

@import isometric

// ここから追記
$size: 5rem

.plane
  +plane($size, $size, darkcyan)
  +border(5px, black) //ここ追記

結果

Edge

html

<div class="isometric-container">
  <div class="isometric">
    <div class="plane"></div>
  </div>
</div>

sass

@import isometric

// ここから追記
$size: 5rem

.plane
  +plane($size, $size, darkcyan)
  +edge(5px, darkcyan) //ここを変更

結果

Shadow

html

<div class="isometric-container">
  <div class="isometric">
    <div class="plane"></div>
  </div>
</div>

sass

@import isometric

// ここから追記
$size: 5rem

.plane
  +plane($size, $size, darkcyan)
  +edge(5px, darkcyan) //ここを変更

結果

Cube

<div class="isometric-container">
  <!--ここから変更-->
  <div class="isometric">
    <div class="cube">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

sass

@import isometric

$size: 5rem

// ここから追記
.cube
  +cube($size, $size, $size, darkcyan)

結果

Position

html

<div class="isometric-container">
  <div class="isometric">
    <div class="plane"></div>
    <div class="grid"></div>
  </div>
</div>

sass

@import isometric

$size: 5rem

.plane
  +plane($size, $size, darkcyan)
  //ここから
  top: $size
  left: $size*2
  transform: translateZ($size*.5)

.grid
    +grid($size, 1%, mediumorchid)
    width: $size*5
    height: $size*5

結果

Animation

html

<div class="isometric-container">
  <div class="isometric">
    <div class="plane"></div>
    <div class="grid"></div>
  </div>
</div>

sass

@import isometric

$size: 5rem

.plane
  +plane($size, $size, darkcyan)
  +animation(planeAnimation, transform, translateZ(0), translateZ($size), 0s, 2s, alternate infinite) //animetion

.grid
  +grid($size, 1%, mediumorchid)
    width: $size*5
    height: $size*5

結果

Move Shadow

html

<div class="isometric-container">
  <div class="isometric">
    <div class="plane"></div>
    <div class="grid"></div>
  </div>
</div>

sass

@import isometric

$size: 5rem

.plane
  +plane($size, $size, darkcyan)
  +animation(planeAnimation, transform, translateZ(0), translateZ($size), 0s, 2s, alternate infinite)
  +moveShadow(planeShadow, 0, $size, .2, .4, 0s, 2s, alternate infinite) //影のアニメーション

.grid
    +grid($size, 1%, mediumorchid)
    width: $size*5
    height: $size*5

結果

Rotate

html

<div class="isometric-container">
  <div class="isometric">
    <div class="plane"></div>
    <div class="grid"></div>
  </div>
</div>

sass

@import isometric

$size: 5rem

.plane
  +plane($size, $size, darkcyan)
  +animation(planeAnimation, transform, translateZ(0), translateZ($size), 0s, 2s, alternate infinite)
  +moveShadow(planeShadow, 0, $size, .2, .4, 0s, 2s, alternate infinite)
  +rotate(planeRotate, 0deg, 360deg, 0s, 7s) //回転のアニメーション

.grid
    +grid($size, 1%, mediumorchid)
    width: $size*5
    height: $size*5

結果

実行させてみて

さわっていけば画像のところまでいけるらしいので、これからもちょこちょこさわっていきたい。

ドキュメントのものがsassしかないので、自分用とかにscssとstylusも作っていきたい。

scss版

github.com