translateX関数

関数 translateX は、要素のX軸に沿った移動を指定します。 プロパティ transform と一緒に使用します。 プロパティの値には、任意のサイズ単位を使用できます。 正の値は右方向に、負の値は左方向に移動させます。

構文

cssセレクタ {
  transform: translateX(移動量);
}

例

マウスをブロックの上に置くと、ブロックは右に 30px 移動します：

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(30px);
}

Результат:

例

マウスをブロックの上に置くと、ブロックは左に 30px 移動します：

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateX(-30px);
}

Результат:

関連項目