サンプル例の内容

サンプルの各ブロックには [transition : all 1s linear] を指定しています。それぞれ白枠にホバーするとボックスが変化します。

【例1】
マウスホバー（#trf_test_01:hover）に [transform : translate(20px,30px)] を指定しています。

【例2】
マウスホバー（#trf_test_02:hover）に [transform : translate3d(20px,30px,-50px)] を指定しています。
ｚ軸がモニターに垂直の軸なので、奥に向かって-50px動いていることになっていますが、見た目は例1と同じになっています。

【例3】
#trf_test_03のブロックは#trf_test_02と同じ設定で、ホバー時も [translate3d(20px,30px,-50px)] に変化しますが、こちらの例ではブロックの親divブロック（白背景のボックス）に、3d変形時の奥行きの深さ「perspective:100px」を指定しているので、白背景の親divの中心にある消失点に向かって3Dっぽい動きになっています。

【例4】
例3と同じ設定で、ホバー時に [translateZ(-50px)] を指定。x , y が移動しないので、例3よりも親divの中心に向かって奥行き（ｚ軸方向に-50pxっぽく）移動している印象があります。

表示位置移動プロパティ

translate(x,y)

X方向、Y方向に2D移動。Y方向省略可（y=0になる）。例 transform:translate(50px,50px)

translateX(x)

X方向に移動。例 transform:translateX(50px)

translateY(y)

Y方向に移動。例 transform:translateY(50px)

translateZ(z)

Z方向に移動。例 transform:translateZ(50px)

translate3d(x,y,z)

X方向、Y方向、Z方向に移動。例 transform:translate3d(10px.10px,20px)

ページトップへ