Aug.4th,2021
＃
“translateY()”関数
“translateY()”関数は要素をY軸方向へ平行移動するための関数です。
“<transform-function>”値として使用することができ、“transform”プロパティで要素を変形させずに移動することができます。
引数は1個の“<length-percentage>”値で、Y軸方向への移動距離を表します。
translateY(〚移動距離〛)
“<percentage>”値は変形される要素の“transform-box”プロパティで指定された参照ボックスを基準としたY軸方向の大きさを“100%”として移動距離を指定します。
変形マトリクス
以下は“translateY(x,y)”を表す変形マトリクスの成分です。
| m11 | m21 | m31 | m41 |
|---|---|---|---|
| m12 | m22 | m32 | m42 |
| m13 | m23 | m33 | m43 |
| m14 | m24 | m34 | m44 |
| 1 | 0 | 0 | 0 |
| 0 | 1 | 0 | y |
| 0 | 0 | 1 | 0 |
| 0 | 0 | 0 | 1 |
＃
使用例
二次元
.transform-1 { transform: translateY(0);}
.transform-2 { transform: translateY(50px);}
.transform-3 { transform: translateY(-50px);}
translateY(0)
箱
translateY(50px)
箱
translateY(-50px)
箱
.transform-4 { transform: translateY(0);}
.transform-5 { transform: translateY(50%);}
.transform-6 { transform: translateY(-50%);}
translateY(0)
箱
translateY(50%)
箱
translateY(-50%)
箱
三次元
.transform-1 { transform: translateY(0);}
.transform-2 { transform: translateY(50px);}
.transform-3 { transform: translateY(-50px);}
translateY(0)
前
後
右
左
上
下
translateY(50px)
前
後
右
左
上
下
translateY(-50px)
前
後
右
左
上
下
.transform-4 { transform: translateY(0);}
.transform-5 { transform: translateY(50%);}
.transform-6 { transform: translateY(-50%);}
translateY(0)
前
後
右
左
上
下
translateY(50%)
前
後
右
左
上
下
translateY(-50%)
前
後
右
左
上
下
＃
