HTML
CSS
HTML5
CSS3
HTML,CSS

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

背景

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要素で文字を表示するとプルプルする件