transform

概要

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

構文

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] と同じです。

実働例

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

参照

• Examples of linear transformation matrices Wikipedia
• Coordinate transformation matrices mathamazement.com
• Microsoft's matrix filter MSDN

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 軸に対しては傾斜は適用されません。

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 軸にそって指定量だけ移動します。

仕様

ブラウザ実装状況

注記

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

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

関連情報

• CSS Transforms の利用
• <translation-value> データ型
• More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
• クロスブラウザな 2D の transform plugin for jQuery