web前端入門到實(shí)戰(zhàn)：CSS3常用轉(zhuǎn)換總結(jié)

一、2D轉(zhuǎn)換

• translate(npx,npx)?

　　相對(duì)當(dāng)前元素位置移動(dòng)

/* 實(shí)現(xiàn)div向左移動(dòng)50個(gè)像素，并向下移動(dòng)100個(gè)像素 */

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

• rotate(ndeg)?

　　相對(duì)當(dāng)前角度旋轉(zhuǎn)

/* 實(shí)現(xiàn)div順時(shí)針旋轉(zhuǎn)30度 */

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

• scale(n,n)?

　　相對(duì)當(dāng)前大小縮放

/* 實(shí)現(xiàn)div寬度加長(zhǎng)2倍，高度增高3倍 */

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

• skew(ndeg,ndeg)?

　　相對(duì)當(dāng)前角度透視傾斜

/* 實(shí)現(xiàn)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)?

　　復(fù)合屬性，六個(gè)參數(shù)分別包含旋轉(zhuǎn)，縮放，移動(dòng)（平移）和傾斜功能

/* 實(shí)現(xiàn)div旋轉(zhuǎn)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轉(zhuǎn)換

• rotateX(ndeg)?

　　相對(duì)當(dāng)前角度圍繞X軸旋轉(zhuǎn)

/* 實(shí)現(xiàn)div圍繞X軸旋轉(zhuǎn)45度 */

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

• rotateZ(ndeg)?

　　相對(duì)當(dāng)前角度圍繞Z軸旋轉(zhuǎn)

/* 實(shí)現(xiàn)div圍繞Z軸旋轉(zhuǎn)45度 */

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

• 3D轉(zhuǎn)換之translate

translateX(npx)

　相對(duì)當(dāng)前元素位置沿X軸移動(dòng)

translateY(npx)
　　相對(duì)當(dāng)前元素位置沿Y軸移動(dòng)

translateZ(npx)
　　相對(duì)當(dāng)前元素位置沿Z軸移動(dòng)

translate3d(x,y,z)

• 3D轉(zhuǎn)換之scale

scaleX(n)

　相對(duì)當(dāng)前元素位置沿X軸縮放

scaleY(n)
　　相對(duì)當(dāng)前元素位置沿Y軸縮放

scaleZ(n)
　　相對(duì)當(dāng)前元素位置沿Z軸縮放

scale3d(x,y,z)

• 3D轉(zhuǎn)換之rotate

rotateX(ndeg)

　　相對(duì)當(dāng)前元素位置沿X軸旋轉(zhuǎn)

rotateY(ndeg)
　　相對(duì)當(dāng)前元素位置沿Y軸旋轉(zhuǎn)

rotateZ(ndeg)
　　相對(duì)當(dāng)前元素位置沿Z軸旋轉(zhuǎn)

rotate3d(xdeg,ydeg,zdeg)