translateY関数

関数translateYは、要素をY軸方向に移動させます。 transformプロパティと組み合わせて使用します。 値にはサイズの単位を指定します。 正の値は下方向、負の値は上方向に移動します。

構文

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

例

ブロックにマウスを乗せると、30px下に移動します:

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

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

Результат:

例

ブロックにマウスを乗せると、30px上に移動します:

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

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

Результат:

関連項目