這篇文章主要介紹了如何使用transform屬性，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

專(zhuān)注于為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)青秀免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

transform屬性用于向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換；該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

CSS3  transform屬性

作用：transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

語(yǔ)法：

transform: none|transform-functions;

可有屬性值說(shuō)明：

none：定義不進(jìn)行轉(zhuǎn)換。

matrix(n,n,n,n,n,n)：定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。

translate(x,y)：定義 2D 轉(zhuǎn)換。

translate3d(x,y,z)：定義 3D 轉(zhuǎn)換。

translateX(x)：定義轉(zhuǎn)換，只是用 X 軸的值。

translateY(y)：定義轉(zhuǎn)換，只是用 Y 軸的值。

translateZ(z)：定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。

scale(x,y)：定義 2D 縮放轉(zhuǎn)換。

scale3d(x,y,z)：定義 3D 縮放轉(zhuǎn)換。

scaleX(x)：通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換。

scaleY(y)：通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換。

scaleZ(z)：通過(guò)設(shè)置 Z 軸的值來(lái)定義 3D 縮放轉(zhuǎn)換。

rotate(angle)：定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。

rotate3d(x,y,z,angle)：定義 3D 旋轉(zhuǎn)。

rotateX(angle)：定義沿著 X 軸的 3D 旋轉(zhuǎn)。

rotateY(angle)：定義沿著 Y 軸的 3D 旋轉(zhuǎn)。

rotateZ(angle)：定義沿著 Z 軸的 3D 旋轉(zhuǎn)。

skew(x-angle,y-angle)：定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。

skewX(angle)：定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。

skewY(angle)：定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。

perspective(n)：為 3D 轉(zhuǎn)換元素定義透視視圖。

注：Internet Explorer 10、Firefox、Opera 支持 transform 屬性。Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）。Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）。Opera 只支持 2D 轉(zhuǎn)換。

CSS3  transform屬性的使用示例

  

    

  
  
rotate(45deg)  


  

    

  
  
rotateX(45deg)


  

    

  
  
rotateY(45deg)


  

    

  
  
rotateZ(45deg)  



  

    

  
  
scale(2)


  

    

  
  
scaleX(2)    


  

    

  
  
scaleY(2)    



  

    

  
  
skew(45deg, 45deg)  


  

    

  
  
skewX(45deg)


  

    

  
  
skewY(45deg)



  

    

  
  
translate(45px)  


  

    

  
  
translateX(45px)


  

    

  
  
translateY(45px)


  

    

  
  
 matrix(2, 2, 0, 2, 45, 0)

效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享如何使用transform屬性?xún)?nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!