transform

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

概要

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

  • 初期値 none
  • 適用対象 変形可能要素
  • 継承 継承しない
  • 相対値の基準 refer to the size of bounding box
  • メディア visual
  • 計算値 as specified, but with relative lengths converted into absolute lengths
  • アニメーションの可否 可。transform の値として補完します。
  • 正規順序 形式文法で定義される一意のあいまいでない順序

構文

transform:  <transform-function>+ | none

<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 として単位の無い <数量> をサポートします。

実働例

 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 <角度>, 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 <数量>s, e.g.  scale(2.1,4) */

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

scaleX

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

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

scaleY

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

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

skew(傾斜)

transform:  skew(ax[, ay])       /* one or two <角度>, 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 <角度>, e.g.  skewX(-30deg) */

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

skewY

transform:  skewY(angle)         /* an <角度>, 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 草案  

ブラウザ実装状況

機能 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 で互換性の理由から再導入しました。これは非標準で将来的におそらく取り除かれるので、使わないでください。

関連情報

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

概要

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

  • 初期値 none
  • 適用対象 変形可能要素
  • 継承 継承しない
  • 相対値の基準 refer to the size of bounding box
  • メディア visual
  • 計算値 as specified, but with relative lengths converted into absolute lengths
  • アニメーションの可否 可。transform の値として補完します。
  • 正規順序 形式文法で定義される一意のあいまいでない順序

構文

transform:  <transform-function>+ | none

<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 として単位の無い <数量> をサポートします。

実働例

 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 <角度>, 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 <数量>s, e.g.  scale(2.1,4) */

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

scaleX

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

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

scaleY

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

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

skew(傾斜)

transform:  skew(ax[, ay])       /* one or two <角度>, 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 <角度>, e.g.  skewX(-30deg) */

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

skewY

transform:  skewY(angle)         /* an <角度>, 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 草案  

ブラウザ実装状況

機能 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 で互換性の理由から再導入しました。これは非標準で将来的におそらく取り除かれるので、使わないでください。

関連情報

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

Contributors to this page: ethertank, sosleepy, Yukoba, Level
最終更新者: ethertank,
サイドバーを隠す