1. CSS3 轉換：transform屬性可以對元素進行移動、縮放、轉動、拉長或拉伸
注意： Internet Explorer 9 要求前綴 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 屬性，Chrome 和 Safari 要求前綴 -webkit- 版本。
2. 旋轉：transform: rotate();
（1）以x、y、z軸進行旋轉，默認是z軸；
（2）rotateX（）、rotateY（）、rotateZ（）
（3）（）內的值單位是：deg角度
比如：transform: rotate(45deg);
（4）還有一種複合寫法：rotate3d（x,y,z,angle）
空間直角座標系（x,y,z）和原點確定一個軸，然後在該軸上旋轉angle的角度
比如：transform: rotate3d(1,1,1,45deg);
注意：
第一種方法：再執行rotateX（）後的圖形，再執行rotateY（）
第二種方法：直接在確定的軸上進行角度旋轉
兩種方法得到的結果是不一樣的
3. 縮放：transform：scale（）
值的絕對值>1，就是放大，比如2，就是放大2倍
值的絕對值 0<值<1，就是縮小，比如0.5，就是原來的0.5倍；
值的正負，負值表示圖形翻轉。
默認情況下，scale（x, y）：以x/y軸進行縮放；如果y沒有值，默認y==x；
也可以分開寫：scaleX() scaleY() scaleZ()，分開寫的時候，可以對Z軸進行縮放
第二種寫法：transform：scale3d（x, y, z）該寫法是上面的方法的複合寫法，結果和上面的一樣。
比如：transform: scaleX(1.8);
4. 傾斜拉伸：skew（x，y），單位：角度deg
如果只有一個參數，y == 0
分開寫：skewX（）和skewY()
正值：將圖中的線拉伸
比如：transform: skewX(30deg);
比如：transform: skewY(30deg);
5. transform：translate（）平移
transform：translate（20px）：一個值的時候，表示水平方向的平移20px，垂直方向0px；兩個值的時候，水平方向和垂直方向分別平移。
transform：translateX()、transform：translateY()、transform：translateZ()，注意Z軸的平移是面向屏幕的
transform：translate3d(x, y, z)：三個值分別對應三個方向
比如：transform: translate3d(50px, 30px, 20px);
6. transform-origin：改變圖形的中心點
當圖形的中心點改變後，圖片的旋轉會受到影響；
中心的默認值：50% 50%，即圖形x軸、y軸的50%的位置，這裏的百分比是以圖形原來盒子長度決定的。包括border、padding、content區
比如：
.demo1{
width: 100px;
height: 100px;
padding: 20px 0px;
border: 10px solid black;
position:absolute;
top: 100px;
left: 100px;
background: green;
transform-origin: 0% 0%;
transform: rotate(30deg);
}
| 關鍵詞 | 百分比 |
| top = top center = center top | 50% 0% |
| right = right center = center right | 100% 50% |
| bottom = bottom center = center bottom | 50% 100% |
| left = left center = center left | 0% 50% |
| center = center center | 50% 50% |
| top left = left top | 0% 0% |
| top right = right top | 100% 0% |
| bottom right = right bottom | 100% 100% |
| bottom left = left bottom | 0% 100% |
7. transform-style：preserve-3d；保留3d效果
比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3 {
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-60deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO
<div id="div3">YELLOW</div>
</div>
</div>
</body>
</html>
