translate 関数

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

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

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

構文

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

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

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

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

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

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

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

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

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

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