web前端入門到實戰：CSS3常用轉換總結

一、2D轉換

• translate(npx,npx)?

　　相對當前元素位置移動

/* 實現div向左移動50個像素，并向下移動100個像素 */

div
{
            transform: translate(50px,100px);
        -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
web前端開發學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（詳細的前端項目實戰教學視頻，PDF）

• rotate(ndeg)?

　　相對當前角度旋轉

/* 實現div順時針旋轉30度 */

div
{
            transform: rotate(30deg);
        -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
}

• scale(n,n)?

　　相對當前大小縮放

/* 實現div寬度加長2倍，高度增高3倍 */

div
{
            transform: scale(2,3);
        -ms-transform: scale(2,3);
    -webkit-transform: scale(2,3);
}

• skew(ndeg,ndeg)?

　　相對當前角度透視傾斜

/* 實現div在X軸和Y軸上分別傾斜20度和30度 */

div
{
            transform: skew(30deg,20deg);
        -ms-transform: skew(30deg,20deg);
    -webkit-transform: skew(30deg,20deg);
}

• matrix(n,n,n,n,n,n)?

　　復合屬性，六個參數分別包含旋轉，縮放，移動（平移）和傾斜功能

/* 實現div旋轉30° */

div
{
            transform:matrix(0.8,0.5,-0.5,0.8,0,0);
        -ms-transform:matrix(0.8,0.5,-0.5,0.8,0,0);
    -webkit-transform:matrix(0.8,0.5,-0.5,0.8,0,0);
}

二、3D轉換

• rotateX(ndeg)?

　　相對當前角度圍繞X軸旋轉

/* 實現div圍繞X軸旋轉45度 */

div
{
            transform: rotateX(45deg);
    -webkit-transform: rotateX(45deg);
}

• rotateZ(ndeg)?

　　相對當前角度圍繞Z軸旋轉

/* 實現div圍繞Z軸旋轉45度 */

div
{
            transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
}
web前端開發學習Q-q-u-n：784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（詳細的前端項目實戰教學視頻，PDF）

• 3D轉換之translate

translateX(npx)

　相對當前元素位置沿X軸移動

translateY(npx)
　　相對當前元素位置沿Y軸移動

translateZ(npx)
　　相對當前元素位置沿Z軸移動

translate3d(x,y,z)

• 3D轉換之scale

scaleX(n)

　相對當前元素位置沿X軸縮放

scaleY(n)
　　相對當前元素位置沿Y軸縮放

scaleZ(n)
　　相對當前元素位置沿Z軸縮放

scale3d(x,y,z)

• 3D轉換之rotate

rotateX(ndeg)

　　相對當前元素位置沿X軸旋轉

rotateY(ndeg)
　　相對當前元素位置沿Y軸旋轉

rotateZ(ndeg)
　　相對當前元素位置沿Z軸旋轉

rotate3d(xdeg,ydeg,zdeg)