CSS3 Pre-Reference



transform

変形方法

試す

コード

#containe {
-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
-o-transform:matrix(1, -0.2, 0, 1, 0, 0);
}

サンプル


-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
-o-transform:matrix(1, -0.2, 0, 1, 0, 0);

コメントする


対応ブラウザ

Firefox
3.5~
Chrome/Safari
3.1~
Opera
10.50~
InternetExplorer
5.5~

パラメータ

none | <変形関数> [ <変形関数> ]*
初期値 none
適用 ブロックレベル要素とインラインレベル要素
継承 しない
レベル 3
%の解釈 要素のサイズを参照
適用メディア Visual
参考文献 CSS 2D Transforms Module Level 3#2. The ‘transform’ Property

解説

変形方法を指定します。

値には変形関数を列挙します。それらを重ねて適用した結果が表示されます。

変形関数は以下の通り。

matrix(<数値>, <数値>, <数値>, <数値>, <数値>, <数値>)
6つの数字の変形マトリックスで2D変形を指定します。matrix(a,b,c,d,e,f)は変形マトリックス[a b c d e f]と等価です。3Dの場合はmatrix3d(…)となり、値には4x4のマトリックスの値を左上から右に向かって順に記述します。
translate(<数値>[, <数値>])
1つ目の値分右(X軸のプラス方向)へ、2つ目の値分下(Y軸のプラス方向)へ移動します。2つ目の値が指定されていない場合は、ゼロと解釈されます。
transform-translate-xy.png 
3Dの場合はtranslate3d(…)となり、X、Y、Z軸の順に記述します。 
translateX(<数値>)
その値分右(X軸のプラス方向)へ移動します。
transform-translate-x.png
translateY(<数値>)
その値分下(Y軸のプラス方向)へ移動します。
transform-translate-y.png
scale(<数値>[, <数値>])
その数値の倍率分、それぞれ左右、上下に拡大/縮小します。2つ目の値が省略された場合は、1つ目の値と同じと解釈します。
transform-scale-xy.png
3Dの場合はscale3d(…)となり、X、Y、Z軸の順に記述します。
scaleX(<数値>)
その数値の倍率分、左右に拡大/縮小します。
transform-scale-x.png
scaleY(<数値>)
その数値の倍率分、上下に拡大/縮小します。
transform-scale-y.png
rotate(<角度>)
”transform-origin”で指定した場所を中心として、回転させます。
transform-rotate.png
3Dの場合はrotate3d(…)となり、X、Y、Z軸の順に回転する角度を記述します。また、rotateX()、rotateY()、rotateZ()と分けて記述することも可能です。
skewX(<角度>)
左右方向に指定角度分傾けます。
transform-skew-x.png
skewY(<角度>)
上下方向に指定角度分傾けます。
transform-skew-y.png
skew(<角度> [, <角度>])
左右、上下方向に指定角度分傾けます。2つ目の値が省略された場合は、ゼロと解釈されます。
skewには性質上、3Dの場合の変形関数は用意されていません。

 

トラックバック

投稿されたコメント