Edited at

CSSのtransform:rotateZ,rotateX,rotateZそれぞれの動き

More than 1 year has passed since last update.


背景

transform:rotateのX,Y,Zの動きが分かりにくかったのでまとめました。

完全の個人的なメモ…


transform:rotate各種動き

下記のような縦軸、横軸にして交差したところは足しこんでいます。

縦軸:Z>X>Yの順でそれぞれ45°設定

横軸:Z>X>Yの順でそれぞれ45°設定

See the Pen transform:rotata by hashito (@hashito) on CodePen.


関連する記事

・CSSでhoverでafter要素で文字を表示するとプルプルする件