translate 関数

関数 translate は、要素のX軸およびY軸方向の移動を指定します。 transform プロパティと共に使用されます。 値には、任意のサイズの単位を使用できます。

1つまたは2つのパラメータを取ることができます。パラメータが2つの場合、最初のパラメータはX軸方向の移動を、2番目のパラメータはY軸方向の移動を指定します。パラメータが1つの場合、それはX軸方向の移動を指定します。

パラメータの値は正または負になります。X軸の正の値は右方向、負の値は左方向に移動します。Y軸の正の値は下方向、負の値は上方向に移動します。

構文

cssセレクタ {
  transform: translate(X軸方向の移動, Y軸方向の移動);
}

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

関連項目