translate

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

translateCSS のプロパティで、平行移動による変形を独自に、 transform プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 transform の値で指定する変形関数を正確に思い出す必要がなくなります。

構文

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

/* 単一の値 */
translate: 100px;
translate: 50%;

/* 二つの値 */
translate: 100px 200px;
translate: 50% 105px;

/* 三つの値 */
translate: 50% 105px 5rem;

単一の <length-percentage>
単一の <length> または <percentage> 値で、 X 軸および Y 軸方向が同じ移動量の二次元の平行移動を指定します。 translate() (二次元の平行移動) 関数に単一の値を指定したものと同等です。
二つの <length-percentage>
二つの <length> または <percentage> 値で、二次元の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。 translate() (二次元の平行移動) 関数に二つの値を指定したものと同等です。
三つの値
二つの <length-percentage> 値と一つの <length> 値で、三次元の平行移動における X, Y, Z 軸の移動量を (それぞれ) 指定します。 translate3d() (三次元の平行移動) 関数と同等です。
none
平行移動が適用されないことを指定します。

形式文法

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

where
<length-percentage> = <length> | <percentage>

HTML

<div>
  <p class="translate">Translation</p>
</div>

CSS

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.translate {
  transition: translate 1s;
}

div:hover .translate {
  translate: 200px 50px;
}

結果

仕様書

仕様書 状態 備考
CSS Transforms Level 2
individual transforms の定義
編集者草案 初回定義
初期値none
適用対象変形可能要素
継承なし
パーセンテージbounding box のサイズ
メディア視覚
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類transform
正規順序構文通り
Creates stacking contextあり

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
translate
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 60
補足 無効
完全対応 60
補足 無効
補足 Enabled by default in Firefox Nightly 71.
無効 From version 60: this feature is behind the layout.css.individual-transform.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 60
無効
完全対応 60
無効
無効 From version 60: this feature is behind the layout.css.individual-transform.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。