CSS 3 2 D変換3 D変換

2 D変換により、要素を移動、スケール、回転、伸長、または延伸することができます.
Internet Explorer 10、FirefoxおよびOperaはtransformプロパティをサポートします.
ChromeとSafariにはプレフィックス-webkit-が必要です.
2 D変換translate()
translate()メソッドでは、要素が現在の位置から移動し、指定されたleft(x座標)とtop(y座標)の位置パラメータに従います.
例

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);       /* IE 9 */
-webkit-transform: translate(50px,100px);   /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);      /* Firefox  */

} rotate()
rotate()メソッドにより、要素は所定の角度を時計回りに回転します.負の値を使用すると、要素が反時計回りに回転します.
≪インスタンス｜Instance｜emdw≫

deg ->  

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);       /* IE 9 */
-webkit-transform: rotate(30deg);   /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);      /* Firefox */
}

scale()
scale()メソッドでは、要素のサイズが増加または減少し、指定された幅(X軸)および高さ(Y軸)パラメータに従います.
≪インスタンス｜Instance｜emdw≫

scale(2,4)             2  ，            4  。

div
{
transform: scale(2,4);
-ms-transform: scale(2,4);  /* IE 9 */
-webkit-transform: scale(2,4);  /* Safari   Chrome */
-o-transform: scale(2,4);   /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

skew()
skew()法により、要素は所定の角度を反転し、所定の水平線(X軸)と垂直線(Y軸)のパラメータに基づいている.
≪インスタンス｜Instance｜emdw≫

skew(30deg,20deg)    X        30  ，   Y     20  。

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);   /* IE 9 */
-webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);  /* Firefox */
}

matrix()
matrix()メソッドは,すべての2 D変換メソッドを組み合わせた.
matrix()メソッドには、回転、スケール、移動、傾斜要素を含む6つのパラメータが必要です.
≪インスタンス｜Instance｜emdw≫

     matrix     div      30  ：
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);     /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Opera */
}

2 D Transformメソッド
関数＃カンスウ＃
説明
matrix(n,n,n,n,n,n)
6つの値の行列を使用して2 D変換を定義します.
translate(x,y)
2 D変換を定義し、X軸とY軸に沿って要素を移動します.
translateX(n)
2 D変換を定義し、X軸に沿って要素を移動します.
translateY(n)
2 D変換を定義し、Y軸に沿って要素を移動します.
scale(x,y)
2 Dズーム変換を定義し、要素の幅と高さを変更します.
scaleX(n)
2 Dズーム変換を定義し、要素の幅を変更します.
scaleY(n)
2 Dズーム変換を定義し、要素の高さを変更します.
rotate(angle)
2 D回転を定義し、パラメータに角度を指定します.
skew(x-angle,y-angle)
X軸とY軸に沿って2 D傾斜変換を定義します.
skewX(angle)
X軸に沿って2 D傾斜変換を定義します.
skewY(angle)
Y軸に沿って2 Dチルト変換を定義します.
CSS 3 D変換
Internet Explorer 10とFirefoxは3 D変換をサポートしています.
ChromeとSafariにはプレフィックス-webkit-が必要です.
Operaは依然として3 D変換をサポートしていない(2 D変換のみをサポートしている).rotateX()
要素をX軸の周りに所定の度数で回転させます.

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari   Chrome */
    -moz-transform: rotateX(120deg);    /* Firefox */
}

rotateY()
要素はそのY軸の周りを所定の度数で回転する.
≪インスタンス｜Instance｜emdw≫

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari   Chrome */
    -moz-transform: rotateY(130deg);    /* Firefox */
}