CSS Reference

translate

平行移動を指定する

translate プロパティは、transform プロパティで使用する、translate() 関数をプロパティとして独立させたものです。要素を平行移動させることができます。

指定可能な値の定義は下記の通りです。

none | <length-percentage> [ <length-percentage> <length>? ]?

つまり、下記、いずれかの指定が可能です。

  • none キーワードを単体で指定（移動なし）
  • <length>、もしくは <percentage> データ型の値を単体で指定（2D / X軸での移動を指定）。これは transform プロパティで translate() 関数に1つの値を指定した場合と同じです。
  • <length>、もしくは <percentage> データ型の値を、2つ（2D / X軸、Y軸での移動を個別に指定）、空白で区切って指定。これは transform プロパティで translate() 関数に2つの値を指定した場合と同じです。
  • <length>、もしくは <percentage> データ型の値を2つと、<length> データ型の値を1つの、計3つの値（3D / X軸、Y軸、Z軸での移動を個別に指定、Z軸には <length> データ型の値のみ指定可能）を空白で区切って指定。これは transform プロパティで translate3d() 関数を使用した場合と同じです。

translateの仕様

初期値
  • none
対象となる要素
  • 変形可能な要素
継承
  • なし

translateのサンプルソース

/* none キーワード値 */
translate: none;

/* 1 つの値（2D） */
translate: 100px;
translate: 50%;

/* 2 つの値（2D） */
translate: 100px 200px;
translate: 50% 100px;

/* 3 つの値（3D） */
translate: 50% 100px 6rem;

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome