CSS3

：

CSS関数

：

translate3d()

　 編集：2022.07.09 by T.A.

[Edge]○。→●、mdn

3D移動。

translate3d( <length-percentage<, <length-percentage>, <length> )

与えられた順の値による移動量ベクター [tx, ty, tz] による、3D 並進を指定する。 

<IMG src="Com/Picture.jpg" style="
 transform:perspective(500px) translate3d(20px, 50px, 100px);
">
Z移動の効果のためにはperspective()が必要だった。 

<IMG src="Com/Picture.jpg" style="
 transform:perspective(500px) translate3d(-20px, 50%, -100px);
">
Z移動の効果のためにはperspective()が必要だった。

関連

perspective()。translate()、translateX()、translateY()。translate3d()、translateZ()。

transform。

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：