1 它如何工作？
轉(zhuǎn)換是使元素改變形狀、尺寸和位置的一種效果。
2 2D 轉(zhuǎn)換
2-1 translate() 方法
通過(guò) translate() 方法，元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)
div {
? width: 150px;
? height: 150px;
? background-color: #dc37b2;
? border: 1px solid
}
.div { transform: translate(50px,60px) }
運(yùn)行效果：
值 translate(50px,100px) 把元素從左側(cè)移動(dòng) 50 像素，從頂端移動(dòng) 60 像素
2-2 rotate() 方法
元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)
.div { transform: rotate(40deg) }
運(yùn)行效果：
值 rotate(30deg) 把元素順時(shí)針旋轉(zhuǎn) 40 度。
2-3 scale() 方法
元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)
.div {
? position: relative;
? top: 100px;
? left: 200px;
? transform: scale(2,2)
}
運(yùn)行效果：
值 scale(2,4) 把寬度轉(zhuǎn)換為原始尺寸的 2 倍，把高度轉(zhuǎn)換為原始高度的 2 倍。
2-4 skew() 方法
元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)
.div {
? position: relative;
? top: 100px;
? left: 200px;
? transform: skew(20deg,30deg)
}
運(yùn)行效果：
值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉(zhuǎn) 20 度，圍繞 Y 軸翻轉(zhuǎn) 30 度。
2-5 matrix() 方法
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。
matrix() 方法需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。
.div { transform: matrix(0.9,0.5,0.5,0.9,0,0) }
運(yùn)行效果：
CSS3中的矩陣指的是一個(gè)方法，書(shū)寫(xiě)為matrix()和matrix3d()，前者是元素2D平面的移動(dòng)變換(transform)，后者則是3D變換。2D變換矩陣為3*3, 如上面矩陣示意圖；3D變換則是4*4的矩陣。
3 ?2D Transform 方法
transform? 改變? 對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜
語(yǔ)法：transform: skew(0,0)
transform-origin? 變換的起源
translate, rotate等方法都是需要單位的，而matrix方法e, f參數(shù)的單位可以省略。
Css代碼：
.img1, .img2 {
? transition: all 1s ease-in-out;
? cursor: pointer
}
.img1 {
? position: absolute;
? transform: scale(0, 0);
? opacity: 0
}
.div1:hover .img1 , .div1_hover .img1 {
? opacity: 1;
? transform: scale(1, 1);
? transform-origin: top right
}
.div1:hover .img2, .div1_hover .img2 {
? transform: scale(0, 0);
? transform-origin: bottom left
}
HTML代碼：
<div class="div1">
<img class="img1" src="../img/xfwn5.jpg">
<img class="img2" src="../img/xfwn4.jpg">
</div>
運(yùn)行效果：
css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡
