CSS transform

transform: translate 系まとめ transform: に組み合わせる translate 系の関数。 x, y は普通に効くけど z 座標はブラウザによって表示が異なります。 使える関数 * translate(x, y=0) * translateX(x) * translateY(y) * translateZ(z) * translate3d(x, Y=0, z=0) transform 系の要素について 適用する要素のpositionはabsoluteにする必要があります。 検証サンプル わかりやすいようにアニメーションしていますが、下記の CSS のままではアニメーションしません。 translate(x, y = 0) y が未指定のときは 0 扱いです。 /* x方向に20px, y方向に10px */ .translate { transform: translate(

transform: rotate 系まとめ transform: に組み合わせる rotate 系の関数。 使える関数 * rotate(angle) * rotateX(angle) * rotateY(angle) * rotateZ(angle) * rotate3d(x, y, z, angle) transform 系の要素について 適用する要素のpositionはabsoluteにする必要があります。 角度を表す数字はデータ型を使用します。 一周 360 度でおなじみの度(deg)やラジアン(rad)、グラード(grad)、1 回転を表すturnなどが使えます。 時計方向がプラスの値、反時計回りはマイナスの値を指定します。 検証サンプル 動きがわかりやすいようにアニメーションしているので、ちょっと CSS が冗長です。 rotate(z) 画像を時計回りに回転します。 .anm-rotate { animation: rotate 0.