translateY関数
関数translateYは、要素をY軸方向に移動させます。
transformプロパティと組み合わせて使用します。
値にはサイズの単位を指定します。
正の値は下方向、負の値は上方向に移動します。
構文
セレクタ {
transform: translateY(移動量);
}
例
ブロックにマウスを乗せると、30px下に移動します:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(30px);
}
:
例
ブロックにマウスを乗せると、30px上に移動します:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(-30px);
}
:
関連項目
-
translate関数
- X軸とY軸方向の移動を指定します -
translateX関数
- X軸方向の移動を指定します
