1 它如何工作阴颖？
轉(zhuǎn)換是使元素改變形狀活喊、尺寸和位置的一種效果。
2 2D 轉(zhuǎn)換
2-1 translate() 方法
通過 translate() 方法量愧，元素從其當(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) }
運行效果：
值 translate(50px,100px) 把元素從左側(cè)移動 50 像素，從頂端移動 60 像素
2-2 rotate() 方法
元素順時針旋轉(zhuǎn)給定的角度偎肃。允許負值煞烫，元素將逆時針旋轉(zhuǎn)
.div { transform: rotate(40deg) }
運行效果：
值 rotate(30deg) 把元素順時針旋轉(zhuǎn) 40 度。
2-3 scale() 方法
元素的尺寸會增加或減少累颂，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)
.div {
? position: relative;
? top: 100px;
? left: 200px;
? transform: scale(2,2)
}
運行效果：
值 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)
}
運行效果：
值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉(zhuǎn) 20 度料饥，圍繞 Y 軸翻轉(zhuǎn) 30 度。
2-5 matrix() 方法
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起瘦棋。
matrix() 方法需要六個參數(shù)稀火，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)赌朋、縮放凰狞、移動以及傾斜元素篇裁。
.div { transform: matrix(0.9,0.5,0.5,0.9,0,0) }
運行效果：
CSS3中的矩陣指的是一個方法，書寫為matrix()和matrix3d()赡若，前者是元素2D平面的移動變換(transform)达布，后者則是3D變換。2D變換矩陣為3*3, 如上面矩陣示意圖逾冬；3D變換則是4*4的矩陣黍聂。
3 ?2D Transform 方法
transform? 改變? 對元素進行旋轉(zhuǎn)、縮放身腻、移動或傾斜
語法：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>
運行效果：
css的transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡
