CSS3

プロパティ

transform

[Edge]○。→●、mdn

変形描画。

変形は、transform プロパティを通して要素が描画される座標系に適用される。このプロパティは変形関数のリストを包含する。座標系に対する最終的な変形の結果は、変形関数の数学的記述にて定義されるように、リストの中の各関数を対応する行列に換算した上で、それらの行列を乗算することにより得られる。

transform 用の none 以外のどの算出値も、変形の描画モデル に述べたように 包含ブロックと積層文脈に影響する。

none

<transform-list>

＝<transform-function>+

<transform-function>

<transform-function> を直列化するためには、文法に記された順序どおりに、それぞれの文法に従って直列化する ― その際には：

<transform-list> の算出値の直列化

<transform-list> の算出値を直列化するときは、その中のすべての <transform-function> を 4×4 行列に換算して順に乗算した結果を <matrix()> として直列化した結果を返す。

変形関数

transform プロパティの値は <transform-function> のリストである。許容される変形関数の集合は以下に与えられる。以下の各種関数における <zero> は 0deg と同じにふるまう（“単位なしの 0”による角度は 旧来との互換性の理由から保全される）。並進用の［横／縦］の <percentage> 値は、基準ボックスの［横幅／縦幅］に相対的になる。

2D 変形関数

matrix()＝ matrix( <number>#{6} )

所与の 6 個の成分値による 2D 3×2 行列の変形行列で表現される、2D 変形を指定する。

translate()＝translate( <length-percentage>, <length-percentage>? )

tx、ty を所与の順による <length-percentage> 値とするとき、移動量ベクター [ tx, ty ] による、2D 並進を指定する。ty は省略可能であり、供されていない場合は 0 と見なされる。

translateX()＝translateX( <length-percentage> )

所与の <length-percentage> 値による、X 方向の 2D 移動を指定する。

translateY()＝translateY( <length-percentage> )

所与の <length-percentage> 値による、Y 方向の 2D 移動を指定する。

scale()＝scale( <number>, <number>? )

sx、sy をそれぞれ、所与の順による <number> 値とするとき、拡縮率ベクター [sx, sy] による、2D 拡縮を指定する。sy は省略可能であり、供されていない場合は sy と同じ値と見なされる。

scaleX()＝scaleX( <number> )

sx を所与の <number> 値とするとき、拡縮率ベクター [sx, 1] による、2D 拡縮を指定する。

scaleY()＝scaleY( <number> )

sy を所与の <number> 値とするとき、拡縮率ベクター [1, sx] による、2D 拡縮を指定する。

rotate()＝rotate( [ <angle> | <zero> ] )

transform-origin プロパティにより定義される［要素の原点］を中心とする、回転角 <angle> による、2D 回転を指定する。

skew()＝skew( [<angle> | <zero>], [<angle> | <zero> ]? )

ax、ay を所与の順による <angle> 値とするとき、[ax, ay] による、X 軸、Y 軸用の 2D 斜傾を指定する。ay は省略可能であり、供されていない場合は 0 と見なされる。

skew() は、互換性の理由から存在し，新たな内容には利用されるべきでない。代わりに skewX()／skewY() を利用するように。skew() のふるまいは、skewX() と skewY() の積とは異なることに注意。

skewX()＝skewX( [<angle> | <zero>] )

所与の角度による、X 軸不変の 2D 斜傾を指定する。【所与の角度だけ Y 軸が傾くように、X 座標を Y 座標に比例する量だけずらす（“skew”する）。】

skewY()＝skewY( [<angle> | <zero>] )

所与の角度による、Y 軸不変の 2D 斜傾を指定する。【 所与の角度だけ Y 軸が傾くように、Y 座標を X 座標に比例する量だけずらす（“skew”する）。】

<IMG src="Com/Picture.jpg" style="
 transform:rotate(15deg) skewX(30deg);
">

補助関数

→●

テスト