translate は x軸およびy軸方向に要素を移動させる事が出来ます。

translate()

translate は下記の形式でx軸およびy軸方向の移動距離を指定します。単位は px や %(パーセント)が指定出来ます。

transform: translate(x軸の移動距離, y軸の移動距離);

例

例として、ホバーすると要素がx軸、y軸に移動するような動きをさせてみます。

HTML

<div class="box_test translate">中央</div>

CSS

.box_test {
  height: 100px;
  width: 100px;
  background-color: #adcd;
  text-align: center;
  line-height:100px;
}

.translate:hover {
  transform:translate(20px, 20px);
}

結果

ホバーするとx軸、y軸に20px移動します。

中央

パーセント指定

%(パーセント)を指定すると自身の要素の大きさ分移動します。

例

例として、ホバーすると要素が右(x軸方向)へ移動するような動きをさせてみます。

HTML

同じなので割愛します。

CSS

translateX() はx軸方向へのみ移動させる事が出来ます。100%を指定しているのでホバーすると要素のサイズ分x軸に移動します。

.box_test {
  height: 100px;
  width: 100px;
  background-color: #adcd;
  text-align: center;
  line-height:100px;
}

.translate:hover {
  transform:translateX(100%);
}

結果

ホバーするとx軸要素のサイズ分移動します。

中央

最後に

特にありません。