CSS3

プロパティ

translate

[Edge]⛌。→●、mdn

X、Y、Z軸方向の平行移動を指定する。

［translate、rotate、scale］プロパティは、ユーザー･インタフェースにおける代表的な用法に対応する仕方で、作者が単純な変形を独立に指定できるようにする ― transform における［translate()、rotate()、scale()］の動作の順序を覚えずに済むよう。これらのプロパティは、それらの動作（同順）を transform とは独立に保って、スクリーン座標内で動作する。【すなわち、これらのプロパティによる変形は、決められた順序で適用される。】

translate プロパティは、順に［X、Y、Z］軸方向の並進を指定する 1 ～ 3 個の値を受容する：

• ［2 個目／3 個目］の値が省略された場合の既定は、0px とする。
• 3 個目の値が：
  • 省略されたか 0 の場合、2D 並進を指定する ― translate() 関数と等価になる。
  • 他の場合、3D 並進を指定する ― translate3d() 関数と等価になる。

none ●

まったく変形を施さないことを指示する。

<length-percentage> [<length-percentage> <length>? ]?

X、Y、Zの値¶

<IMG src="Com/Picture.jpg" style="border:1px solid red;
 translate:20px 30px;
">

¶

<DIV style="border:1px solid black; width:100px; height:100px;
 position:relative;
">
 <IMG src="Com/Picture.jpg" style="border:1px solid red;
  position:absolute;
  translate:20px 30px;
 ">
</DIV>

¶

注記： translate プロパティの解決値は算出値なので、getComputedStyle() の結果は百分率値を含む【百分率値が指定された場合には】。

関連

transform。

テスト