このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

translate3d()”関数CSS3で追加

記事Aug.4th,2021
要素を三次元空間内で平行移動するCSSの関数、“translate3d()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

translate3d()”関数

translate3d()”関数は要素を三次元空間内で平行移動するための関数です。

<transform-function>”値として使用することができ、transform”プロパティで要素を変形させずに移動することができます。

引数は2個の<length-percentage>”値と1個の<length>”値をコンマ“,”で区切って記述します。

translate3d(〚X軸方向の移動距離〛,〚Y軸方向の移動距離〛,〚Z軸方向の移動距離〛)

<percentage>”値は要素のtransform-box”プロパティで指定された参照ボックスの対応する方向の寸法を“100%”として移動距離を指定します。

1個目の引数はX軸方向への移動距離を表します。

2個目の引数はY軸方向への移動距離を表します。

3個目の引数はZ軸方向への移動距離を表します。3個目の引数には<percentage>”値は使用できません。

変形マトリクス

以下は“translate3d(x,y,z)”を表す変形マトリクスの成分です。

m11 m21 m31 m41
m12 m22 m32 m42
m13 m23 m33 m43
m14 m24 m34 m44
1 0 0 x
0 1 0 y
0 0 1 z
0 0 0 1

使用例

.transform-1 { transform: translate3d(0,0,0);}
.transform-2 { transform: translate3d(50px,0,0);}
.transform-3 { transform: translate3d(0,50px,0);}
.transform-4 { transform: translate3d(0,0,50px);}
.transform-5 { transform: translate3d(50px,50px,0);}
.transform-6 { transform: translate3d(0,50px,50px);}
.transform-7 { transform: translate3d(50px,0,50px);}
.transform-8 { transform: translate3d(50px,50px,50px);}
.transform-9 { transform: translate3d(-50px,-50px,-50px);}
.transform-10 { transform: translate3d(-50px,-50px,50px);}
translate3d(0,0,0)
translate3d(50px,0,0)
translate3d(0,50px,0)
translate3d(0,0,50px)
translate3d(50px,50px,0)
translate3d(0,50px,50px)
translate3d(50px,0,50px)
translate3d(50px,50px,50px)
translate3d(-50px,-50px,-50px)
translate3d(-50px,-50px,50px)

仕様書

定義されている仕様書
Level 1 Level 2
勧告候補(CR) 作業草稿(WD)
translate3d()
定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク