小編給大家分享一下CSS3中如何實現(xiàn)transform功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)是專業(yè)的鄞州網(wǎng)站建設(shè)公司，鄞州接單;提供成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行鄞州網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

CSS3中的變形功能：在CSS3中可以利用transform功能來實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動著四種類型的變形功能。

1、如何使用transform功能：

（1）在CSS3中通過transform屬性來實現(xiàn)transform功能：

（2）transform功能使用方法：
transform:功能;
-ms-transform:功能;/*IE9*/   
-moz-transform:功能;/*Firefox*/
-webkit-transform:功能;/*Safari和chrome*/
-o-transform:功能;/*Opera*/

2、rotate旋轉(zhuǎn)，在參數(shù)中規(guī)定角度（rotate表示的是順時針旋轉(zhuǎn)，deg是CSS3中的角度單位）：

（1）使用方法：
-ms-transform:rotate(角度);/*IE9*/   
-moz-transform:rotate(角度);/*Firefox*/
-webkit-transform:rotate(角度);/*Safari和chrome*/
-o-transform:rotate(角度);/*Opera*/

（2）rotate旋轉(zhuǎn)的應(yīng)用：

1）HTML代碼：

2）CSS代碼：

div{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    -ms-transform:rotate(45deg);/*IE9*/     
    -moz-transform:rotate(45deg);/*Firefox*/  
    -webkit-transform:rotate(45deg);/*Safari和chrome*/  
    -o-transform:rotate(45deg);/*Opera*/  
}

3）效果圖如下：

3、scale縮放轉(zhuǎn)換：

（1）使用方法：transform:scale(值)，他的值是指定的縮放倍率，比如0.5就是縮放50%，1就是縮放100%，1.5就是縮放150%；

-ms-transform:scale(值);/*IE9*/   
-moz-transform:scale(值);/*Firefox*/
-webkit-transform:scale(值);/*Safari和chrome*/
-o-transform:scale(值);/*Opera*/

（2）可能的值：

1）scale(x,y)使元素X軸和Y軸同時縮放；
2）scale(x)使元素僅X軸縮放；
3）scale(y)使元素僅Y軸縮放；

（3）scale縮放轉(zhuǎn)換的應(yīng)用：

1）HTML代碼：

2）CSS代碼：

div{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
    /*縮放值X與Y為正整數(shù)時*/  
    -ms-transform:scale(2,2);/*IE9*/     
    -moz-transform:scale(2,2);/*Firefox*/  
    -webkit-transform:scale(2,2);/*Safari和chrome*/  
    -o-transform:scale(2,2);/*Opera*/  
      
    /*縮放值X與Y均為小于1的浮點數(shù)時*/  
    /*-ms-transform:scale(0.5,0.5);*//*IE9*/     
    /*-moz-transform:scale(0.5,0.5);*//*Firefox*/  
    /*-webkit-transform:scale(0.5,0.5);*//*Safari和chrome*/  
    /*-o-transform:scale(0.5,0.5);*//*Opera*/  
      
    /*縮放值僅X為小于1的浮點數(shù)時*/  
    /*-ms-transform:scaleX(0.5);*//*IE9*/     
    /*-moz-transform:scaleX(0.5);*//*Firefox*/  
    /*-webkit-transform:scaleX(0.5);*//*Safari和chrome*/  
    /*-o-transform:scaleX(0.5);*//*Opera*/  
      
    /*縮放值僅Y為小于1的浮點數(shù)時*/  
    /*-ms-transform:scaleY(0.5);*//*IE9*/     
    /*-moz-transform:scaleY(0.5);*//*Firefox*/  
    /*-webkit-transform:scaleY(0.5);*//*Safari和chrome*/  
    /*-o-transform:scaleY(0.5);*//*Opera*/  
}

3）效果圖如下：

①未縮放時的效果圖：

②縮放值X與Y為正整數(shù)時的效果圖：

③縮放值X與Y均為小于1的浮點數(shù)時的效果圖：

④縮放值僅X為小于1的浮點數(shù)時的效果圖：

⑤縮放值僅Y為小于1的浮點數(shù)時的效果圖：

4、傾斜skew：

（1）使用方法：

transform:skew(角度);它的值是角度；
-ms-transform:skew(角度);/*IE9*/   
-moz-transform:skew(角度);/*Firefox*/
-webkit-transform:skew(角度);/*Safari和chrome*/
-o-transform:skew(角度);/*Opera*/

（2）可能的值：

1）skew(x,y)使元素在水平方向和垂直方向同時扭曲(X軸和Y軸同時按一定的角度值進行扭曲變形)只有一個參數(shù)的時候，只在水平方向上傾斜；
2）skewX(x)僅使元素在水平方向上扭曲變形(X軸扭曲變形)
3）skewY(y)僅使元素在垂直方向上扭曲變形(Y軸扭曲變形)

（3）傾斜skew的應(yīng)用：

1）HTML代碼：

2）CSS代碼：

div{  
    width: 300px;  
    height: 300px;  
    background-color: lightblue;  
      
    /*X軸與Y軸均傾斜*/  
    -ms-transform:skew(30deg,30deg);    
    -moz-transform:skew(30deg,30deg);  
    -webkit-transform:skew(30deg,30deg);  
    -o-transform:skew(30deg,30deg);  
      
    /*設(shè)置一個值相當(dāng)于僅X軸傾斜*/  
    /*-ms-transform:skew(30deg);*//*IE9*/     
    /*-moz-transform:skew(30deg);*//*Firefox*/  
    /*-webkit-transform:skew(30deg);*//*Safari和chrome*/  
    /*-o-transform:skew(30deg);*//*Opera*/  
      
    /*僅X軸傾斜*/  
    /*-ms-transform:skewX(30deg);*//*IE9*/     
    /*-moz-transform:skewX(30deg);*//*Firefox*/  
    /*-webkit-transform:skewX(30deg);*//*Safari和chrome*/  
    /*-o-transform:skewX(30deg);*//*Opera*/  
      
    /*僅Y軸傾斜*/  
    /*-ms-transform:skewY(30deg);*//*IE9*/     
    /*-moz-transform:skewY(30deg);*//*Firefox*/  
    /*-webkit-transform:skewY(30deg);*//*Safari和chrome*/  
    /*-o-transform:skewY(30deg);*//*Opera*/  
}

3）效果圖如下：

①未傾斜的效果圖：

②X軸與Y軸均傾斜的效果圖：

③設(shè)置一個值相當(dāng)于僅X軸傾斜的效果圖：

④僅X軸傾斜的效果圖：

⑤僅Y軸傾斜的效果圖：

5、移動translate：

（1）使用方法：

transform:translate(值);它的值是指定移動的距離；
-ms-transform:translate(值);/*IE9*/   
-moz-transform:translate(值);/*Firefox*/
-webkit-transform:translate(值);/*Safari和chrome*/
-o-transform:translate(值);/*Opera*/

（2）可能的值：
1）translate(x,y)水平方向與垂直方向同時移動(也就是X軸和Y軸同時移動)只有一個參數(shù)的時候，只在水平方向上移動；
2）translateX(x)僅水平方向(X軸移動)
3）translateY(y)僅垂直方向(Y軸移動)

（3）移動translate的應(yīng)用：

1）HTML代碼：