translateX関数
関数 translateX は、要素のX軸に沿った移動を指定します。
プロパティ transform と一緒に使用します。
プロパティの値には、任意のサイズ単位を使用できます。
正の値は右方向に、負の値は左方向に移動させます。
構文
セレクタ {
transform: translateX(移動量);
}
例
マウスをブロックの上に置くと、ブロックは右に 30px 移動します：
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(30px);
}
:
例
マウスをブロックの上に置くと、ブロックは左に 30px 移動します：
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateX(-30px);
}
:
関連項目
-
関数
translate,
X軸とY軸に沿った移動を指定します -
関数
translateY,
Y軸に沿った移動を指定します
