Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

transform CSS プロパティは CSS 視覚整形モデルの座標空間を変更できるようにします。これを用いると、要素を移動、回転、スケーリング、傾斜させることができます。

初期値none
適用対象変形可能要素
継承不可
相対値の基準bounding box のサイズ
メディアvisual
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの可否可。 の値として補完しますtransform
正規順序形式文法で定義される一意のあいまいでない順序
Creates stacking context継承する

構文

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> )

<transform-function>
1 個以上の CSS transform functions。下記参照。
none
transform は何も適用されないことを示す。

CSS transforms の利用 を参照。

実働例

pre {
  width: 33em;
  border: solid red;

  -webkit-transform: translate(100px) rotate(10deg);
  -webkit-transform-origin: 60% 100%;

  -o-transform: translate(100px) rotate(10deg);
  -o-transform-origin: 60% 100%;

  transform: translate(100px) rotate(10deg);
  transform-origin: 60% 100%;
}

CSS 変換関数

transform CSS プロパティは要素で使用される座標システムを transform 関数 を用いて操作できるようにします。これらの関数は以下に記述されています。

matrix(行列)

transform:  matrix(a, c, b, d, tx, ty)

/* a, b, c, d は変換行列を構成します 
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   tx, ty は移動量です(translate values)  */

6 値からなる 2D 変換行列を指定します。これは matrix [a b c d tx ty] と同じです。

注記:  古いバージョンの Gecko (Firefox) は txty として <length> 値を受け付けます。現在の Gecko、Webkit(Safari、Chrome)、Opera は、 txty として単位の無い <number> をサポートします。

実働例

 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
background: wheat;
max-width: intrinsic;  max-width: -moz-fit-content;

-webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
     -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
        transform: matrix(1, 0, 0.6, 1,  250, 0);

参照

rotate(回転)

transform:  rotate(angle);      /* an <angle>, e.g.  rotate(30deg) */

要素をその原点(-moz-transform-origin で指定)を中心に時計回りに指定された angle だけ回転させます。この操作は matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] に対応します。

scale(スケーリング)

transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */

[sx, sy] で記述される 2D スケーリング操作を指定します。sy が指定されていない場合は、sx と同じであるとみなされます。

scaleX

transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */

vector [sx, 1] を用いたスケーリングを指定します。

scaleY

transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */

vector [1, sy] を用いたスケーリングを指定します。

skew(傾斜)

transform:  skew(ax[, ay])       /* one or two <angle>, e.g.  skew(30deg,-10deg) */

要素を X 軸または Y 軸に対して指定された角度だけ傾斜させます。ay が指定されていない場合は、Y 軸に対しては傾斜は適用されません。

注記: skew() 関数は初期の草案に存在しました。この関数は取り除かれましたが、一部の実装にはまだ残されています。これは使わないでください。

同じ効果を得るために、skew() に1 つの引数を与えて使っていたのなら skewX() を、汎用的には matrix(1, tan(ay), tan(ax), 1, 0, 0) を使ってください。ここで tan() は CSS 関数ではなく、自分で計算する必要がある点に注意してください。

skewX

transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */

要素を X 軸に対して指定された angle だけ傾斜させます。

skewY

transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */

要素を Y 軸に対して指定された angle だけ傾斜させます。

translate(移動)

transform:  translate(tx[, ty])  /* one or two <length> values */

vector [tx, ty] による 2D 移動を指定します。ty が指定されていない場合は、値は0とみなされます。

<translation-value> 引数は <length> 値か <percentage> 値のいずれかです。

translateX

transform:  translateX(tx)       /* see <length> for possible values */

要素を X 軸にそって指定量だけ移動します。

translateY

transform:  translateY(ty)       /* see <length> for possible values */

要素を Y 軸にそって指定量だけ移動します。

仕様

仕様 策定状況 コメント
CSS Transforms Level 1
transform の定義
草案  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) -webkit 3.5 (1.9.1)-moz
16.0 (16.0)
9.0 -ms
10.0
10.5-o
12.10
3.1-webkit
3D のサポート 12.0-webkit 10.0-moz
16.0 (16.0)
10.0 未サポート 4.0-webkit
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? ? ?

注記

Internet Explorer 5.5 以降はプロプライエタリな Matrix Filter を使って同様の効果を得ることができます。

Gecko 14.0 は skew()の実験的なサポートを取り除きましたが、Gecko 15.0 で互換性の理由から再導入しました。これは非標準で将来的におそらく取り除かれるので、使わないでください。

関連情報

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

 このページの貢献者: Sebastianz, Prinz_Rana, prayash, fscholz, ethertank, sosleepy, Yukoba, Level
 最終更新者: Sebastianz,