transform CSS プロパティは、与えられた要素の回転、拡大縮小、傾斜、移動ができます。これは、CSS 視覚整形モデル の座標空間を変更することにより実現しています。

このプロパティに none 以外の値が設定されていると、重ね合わせコンテキスト が作成されます。この場合、オブジェクトは、このオブジェクトを含む position: fixed 要素のための包含ブロックとして扱われます。

ボックスモデルによって配置された要素のみが transform の対象になります。大雑把に言うと、要素は display: block を設定するとボックスモデルによって配置されます。

構文

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

/* 関数値 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* マルチ関数値 */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* グローバル値 */
transform: inherit;
transform: initial;
transform: unset;

transform プロパティには、キーワード値 none<transform-function> の値のいずれかが指定されます。

<transform-function>
適用される 1 つ以上の CSS 変形関数です。変形関数は、左から右へ順に重ねられ、つまり右から左の順に変形の混合の効果が適用されます。
none
変形を何も適用しないことを指定します。

正式な構文

none | <transform-list>

where
<transform-list> = <transform-function>+

where
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>

where
<matrix()> = matrix( <number> [, <number> ]{5,5} )
<translate()> = translate( <length-percentage> [, <length-percentage> ]? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> [, <number> ]? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( <angle> )
<skew()> = skew( <angle> [, <angle> ]? )
<skewX()> = skewX( <angle> )
<skewY()> = skewY( <angle> )
<matrix3d()> = matrix3d( <number> [, <number> ]{15,15} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
<rotateX()> = rotateX( <angle> )
<rotateY()> = rotateY( <angle> )
<rotateZ()> = rotateZ( <angle> )
<perspective()> = perspective( <length> )

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

HTML

<div>Transformed element</div>

CSS

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

結果

その他の例は、CSS Transforms の利用 および <transform-function> をご覧ください。

仕様書

仕様書 状態 備考
CSS Transforms Level 2
transform の定義
編集者草案 3D 変換関数を追加。
CSS Transforms Level 1
transform の定義
草案 初回定義。

初期値none
適用対象変形可能要素
継承なし
パーセンテージbounding box のサイズ
メディア視覚
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類transform
正規順序形式文法で定義される一意のあいまいでない順序
Creates stacking contextあり

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

36

あり -webkit-

12 -webkit-

16

49 -webkit-

44 -webkit- 2

103

11 -webkit-

9 -ms- 4

12.1

15 -webkit-

10.5 — 15 -o-

9

3.1 -webkit-

3D support121210105154
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応2.1 -webkit- 1 あり -webkit- あり -webkit-

16

49 -webkit-

44 -webkit- 2

11.5 -webkit-

9

3.2 -webkit-

あり
3D support3 -webkit- あり あり あり223.2 あり

1. Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. Internet Explorer does not support the global values initial and unset.

4. Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

5. Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as -ms-transform:rotate(10deg) translateZ(0);, will prevent the entire property from being applied.

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,