これまでイラレでアイソメやってみようシリーズをしていたのですが、コーダー側も実装を求められることがあるかもよ？ってことで、CSSでチャレンジしてみます。
CSSで変形と言ったら？ そう、transformですね。transformプロパティにも色々あるので、それぞれでアイソメトリック表現実験をしようと思います。
transform-style: preserve-3d;はIE11が対応していないため今回はスルーします。
目次
上面実装チャレンジ
上記の記事でも触れていますが、アイソメトリック図法とは厳密に言えば図のようにx軸、y軸に30度、30度です。見せるのに適した角度は図とデザインにもよるのですが、実装の目安として丁度良いのでこの角度を目指します。
また、アイソメトリックといえば上面、右面、左面とありますが、まずは上面の実装とします。
デフォルト
イメージ画像
なんの変哲も無い正方形サイズのPNG画像です。
ブロック要素
前述の画像サイズに合わせて幅150px、高さ150pxのなんの変哲も無いdiv要素です。編集が楽なのでサイズ以外に線や色などもインラインでスタイルを当てています。
transform:skew(-60deg,30deg);
まずskewで試してみます。
イメージ画像
ブロック要素
ダ、ダイナミックに伸びてしまいました！ しかも文字に被ってるし、スマホで見ると半分ブラウザ枠内からはみ出してしまっています（すみません）。
skewは傾斜変形（シアー）の指示なので、元サイズから変形されてしまいます。ここら辺はイラレのシアーと若干変形の仕方が異なるようです。
transform: rotate(45deg);
サイズや縦横位が変化してしまうのは回避したいので、skewはやめてrotateを試してみましょう。
イメージ画像
ブロック要素
そのまんま45度回転しました。アイソメトリックとは違いますね。。
transform: rotateX(45deg) rotateZ(45deg);
rotate()単体指定だとただの回転になってしまうので、rotateX() rotateZ()と分けて指定するパターンを試してみます。
イメージ画像
ブロック要素
お！ 近い?!
これだけだとアイソメトリックになってるのかなってないのか分かりずらいため、イラレでアイソメトリック化して書き出した画像を貼ってみます。
正解画像
若干違いますね。おしい！
うーん、、もう一度イラレでアイソメ研究の記事を見返してみます。
今回、上面の実装を目指しているので、
| 面 | 拡大・縮小 | シアー | 回転 |
|---|---|---|---|
| 上面 | 水平 81.65%・垂直 70.71% | シアー 30°(水平) | 回転 -30° |
この3つの変形を順にかければいいのでは？💡🌟
transform: scale(0.8165, 0.7071) skewX(-30deg) rotate(30deg);
欲張りセットみたいな記述になりました。さてーー、
イメージ画像
ブロック要素
正解画像
細……長い。何故だ🤨
transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg);
検索で正解っぽい設定を見つけてきましたその1。これでどうだ！
イメージ画像
ブロック要素
正解画像
来ました！！……いや来てないです。若干縦比率が違いました。
PCの方は正解画像をドラッグして変形後に重ねてみてください。
transform: rotateZ(-60deg) skewY(30deg);
検索で正解っぽい設定を見つけてきましたその2。
イメージ画像
ブロック要素
正解画像
辺の角度は正解と同じになりましたが、今度はサイズと縦横比がズレてしまいました。
transform: rotateZ(-60deg) skewY(30deg) scale(0.7071, 0.8165);
イラレのときの変形の数値をもう一度参考にして、先ほどのtransform: rotateZ(-60deg) skewY(30deg);にscale(0.7071, 0.8165)を追加してみます。
transformプロパティは複数かけもできますが、順番で変形結果も異なります。ここでは最後に縦横比の調整を持ってきました。
イメージ画像
ブロック要素
正解画像
やったー！！ ついに完璧なアイソメトリック上面ができました！ IE11対応も確認済みです。
左面
上面ができたら、左面、右面はそのアレンジになります。
transform: skewY(30deg) scale(0.7071, 0.8165);
イメージ画像
ブロック要素
正解画像
右面
transform: skewY(-30deg) scale(0.7071, 0.8165);
イメージ画像
ブロック要素
正解画像
まとめ
今回のやり方でCSSでアイソメトリックにする場合、各面を組み合わせて立方体にすることはほぼ無いと思われるので合体はパスします。
（IE11非対応を飲み込んだ上でtransform-style: preserve-3d;を使うことはあるかもしれません）
この記事ではざっと流しましたが、transformプロパティの各変形について理解しきれていないため別記事でまとめたいと思います。
hoverエフェクトのアレンジ例
transform: rotateZ(-60deg) skewY(30deg) scale(0.7071, 0.8165);をhoverで全てtransform: rotateZ(0) skewY(0) scale(1, 1);に戻しています。
hoverということでスマホの方は確認できませんね。すみません。
イメージ画像
ブロック要素
図・ブロック要素のギリギリのところにマウスを持っていくと、hover判定が当たったり外れたりするのが若干気になりつつ。
おまけ
transformプロパティで使用できる角度の単位について
角度の単位はdeg（度）、grad（グラード）、rad（ラジアン）、turn（回転数）が使用できます。仕事の案件でdeg以外は使われたくないかも😅
もっと知りたい方向け参考サイト
Codepenでの実装まとめ記事です。一口にアイソメトリック(角度アレンジver）と言っても、それぞれ使用しているtransformプロパティが違ってて面白いですね。
アイソメに限らないtransformプロパティを使った3D表現の例は下記サイトに複数例上がっています。リッチ！
