CSS<transform-function> データ型は、要素の外見の変形を表します。変形関数は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。

数学的な変形の記述

HTML 要素の寸法や形状を記述するために様々な座標モデルが用いられることがあり、同様に変形にも適用されます。最も一般的なものは、直交座標系ですが、同次座標系が用いられることもあります。

直交座標系

直交座標系では、二次元の点は、 X 座標 (横座標) と Y 座標 (縦座標) の二つの値を使用して記述します。これは (x, y) のベクトル表記で表現されます。

CSS (および多くのコンピューターグラフィック) では、原点 (0, 0) が各要素の左上を表します。正の座標は原点から下および右に向かい、負の座標は上および左に向かいます。従って、右に2単位、下に5単位では (2, 5) となり、左に3単位、上に12単位では (-3, -12) となります。

変形関数

変形関数は、座標の値を操作することによって要素の外見を変更します。線形変形関数は、次のように2×2の行列で記述されます。

ac bd

関数は行列の乗算によって要素に適用されます。つまり、それぞれの座標は行列の値に基づいて変化します。

ac bd xy = ax+cy bx+dy

一行の中に複数の変換を適用することもできます。

a1 c1 b1 d1 a2 c2 b2 d2 = a1 a2 + c1 b2 a1 c2 + c1 d2 b1 a2 + d1 b2 b1 c2 + d1 d2

この記法で、最もよく使われる回転、拡大縮小、傾斜の変換を記述し、合成することができます。 (実際、すべての変換が記述できる線形関数です。) 変換の合成は右から左の順に効果的に適用されます。

しかし、主要な変形のうち平行移動は線形ではなく、従ってこの記法を使用する場合は特例とする必要があります。平行移動のベクトル (tx, ty) は、二つの追加の引数で別に表現しなければなりません。

メモ: 直交座標よりも難解ですが、射影幾何学同次座標は3×3の変換行列を使用するので、線形関数として平行移動をより簡単に表現できます。

構文

<transform-function> データ型は、以下に示した変形関数のうちの一つを使用して指定します。各関数は二次元または三次元の座標操作を適用します。

行列変換

matrix()
二次元の同次変換行列を記述します。
matrix3d()
三次元の変換を4×4の同次行列で記述します。

視点距離

perspective()
ユーザーと z=0 平面との間の距離を設定します。

回転

rotate()
要素を二次元平面上で特定の点を中心に回転します。
rotate3d()
要素を三次元空間で特定の軸を中心に回転します。
rotatex()
要素を水平軸を中心に回転します。
rotatey()
要素を垂直軸を中心に回転します。
rotatez()
要素を Z 軸を中心に回転します。

拡大縮小

scale()
要素を二次元平面上で拡大または縮小します。
scale3d()
要素を三次元空間で拡大または縮小します。
scalex()
要素を水平に拡大または縮小します。
scaley()
要素を垂直に拡大または縮小します。
scalez()
要素を Z 軸方向に拡大または縮小します。

歪め

skew()
要素を二次元平面上で歪ませます。
skewx()
要素を水平方向に歪ませます。
skewy()
要素を垂直方向に歪ませます。

平行移動

translate()
要素を二次元平面上で平行移動させます。
translate3d()
要素を三次元空間で平行移動させます。
translatex()
要素を水平方向に平行移動させます。
translatey()
要素を垂直方向に平行移動させます。
translatez()
要素を Z 軸方向に平行移動させます。

仕様書

仕様書 状態 備考
CSS Transforms Level 1
transform の定義
草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり ?3.51 29310.53.1
3D support12 ?1010154
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応2.1 あり ? あり11.53.2 あり
3D support3 あり ? あり223.2 あり

1. Firefox 14 removed experimental support for skew(), but it was reintroduced in Firefox 15.

2. Before Firefox 16, the translation values of matrix() and matrix3d() could be <length>s, in addition to the standard <number>.

3. Internet Explorer 9 supports 2D but not 3D transforms. In version 9, mixing 2D and 3D transform functions invalidates the entire property.

関連情報

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

このページの貢献者: mfuji09, Sebastianz, Prinz_Rana, Simplexible, prayash, ethertank, sosleepy
最終更新者: mfuji09,