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

成都創(chuàng)新互聯(lián)主營濂溪網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),濂溪h5小程序設(shè)計(jì)搭建,濂溪網(wǎng)站營銷推廣歡迎濂溪等地區(qū)企業(yè)咨詢

CSS3transform屬性

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

語法：

transform:none|transform-functions;

可有屬性值說明：

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

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

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義3D轉(zhuǎn)換，使用16個值的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)：通過設(shè)置X軸的值來定義縮放轉(zhuǎn)換。

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

scaleZ(z)：通過設(shè)置Z軸的值來定義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)換元素定義透視視圖。

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

CSS3transform屬性的使用示例