Aug.4th,2021
＃
“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)
前
後
右
左
上
下
.transform-11 { transform: translate3d(0,0,0);}
.transform-12 { transform: translate3d(50%,0,0);}
.transform-13 { transform: translate3d(0,50%,0);}
.transform-14 { transform: translate3d(0,0,50%);}
.transform-15 { transform: translate3d(50%,50%,0);}
.transform-16 { transform: translate3d(0,50%,50%);}
.transform-17 { transform: translate3d(50%,0,50%);}
.transform-18 { transform: translate3d(50%,50%,50%);}
.transform-19 { transform: translate3d(-50%,-50%,-50%);}
.transform-20 { transform: translate3d(-50%,-50%,50%);}
translate3d(0,0,0)
前
後
右
左
上
下
translate3d(50%,0,0)
前
後
右
左
上
下
translate3d(0,50%,0)
前
後
右
左
上
下
translate3d(0,0,50%)
前
後
右
左
上
下
translate3d(50%,50%,0)
前
後
右
左
上
下
translate3d(0,50%,50%)
前
後
右
左
上
下
translate3d(50%,0,50%)
前
後
右
左
上
下
translate3d(50%,50%,50%)
前
後
右
左
上
下
translate3d(-50%,-50%,-50%)
前
後
右
左
上
下
translate3d(-50%,-50%,50%)
前
後
右
左
上
下
＃
