這一章，我準(zhǔn)備詳細(xì)介紹下 transform 這個(gè)屬性。
我們先來(lái)看看其兼容性淹父，
Internet Explorer 10噪裕、Firefox蹲盘、Opera 支持 transform 屬性。
Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）膳音。
Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）召衔。
所以，對(duì)于一些對(duì)瀏覽器兼容性有要求的網(wǎng)站來(lái)說(shuō)祭陷，大多數(shù)屬性都是不能用到的苍凛。
Opera 只支持 2D 轉(zhuǎn)換趣席。
好，接下來(lái)我們一個(gè)個(gè)的看其屬性
<div></div>
div{
width: 100px;
height: 100px;
background: red;
}
一毫深、2D吩坝、3D轉(zhuǎn)換
(1) matrix(n,n,n,n,n,n) // 定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣
div{
width: 100px;
height: 100px;
background: red;
transform: matrix(0.586,0.8,-0.8,0.586,40,10);
-ms-transform: matrix(0.586,0.8,-0.8,0.586,40,10);
-webkit-transform: matrix(0.586,0.8,-0.8,0.586,40,10);
}
(2) matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉(zhuǎn)換哑蔫，使用 16 個(gè)值的 4x4 矩陣钉寝。
(3) translate(x, y)
.div2{
width: 100px;
height: 100px;
background: red;
transform: translate(50px, 50px);
-ms-transform: translate(50px, 50px);
-webkit-transform: translate(50px, 50px);
}
(4) translate3d(x,y,z) 定義 3D 轉(zhuǎn)換
(5) translateX(x) 定義轉(zhuǎn)換，只是用 X 軸的值
(6) translateY(y) 定義轉(zhuǎn)換闸迷，只是用 Y 軸的值
(7) translateZ(z) 定義 3D 轉(zhuǎn)換嵌纲，只是用 Z 軸的值
二、2D腥沽、3D縮放
(1) scale(x, y) 定義 2D 縮放轉(zhuǎn)換
width: 100px;
height: 100px;
background: red;
transform: scale(1.1,1.2);
-mos-transform: scale(1.1,1.2);
-webkit-transform: scale(1.1,1.2);
(2) scale3d(x, y, z) 定義 3D 縮放轉(zhuǎn)換
(3) scaleX(x) 通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換
(4) scaleY(y) 通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換
(5) scaleZ(z) 通過(guò)攝這是 Z 軸的值來(lái)定義 3D 縮放轉(zhuǎn)換
三逮走、旋轉(zhuǎn)
(1) rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度
.div2{
width: 100px;
height: 200px;
background: red;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
(2) rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)
(3) rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)
(4) rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)
(5) rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)
四今阳、傾斜轉(zhuǎn)換
(1) skew(10deg, 10deg) 定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換师溅。
.div2{
width: 100px;
height: 200px;
background: red;
transform: skew(10deg, 10deg);
-ms-transform: skew(10deg, 10deg);
-webkit-transform: skew(10deg, 10deg);
}
