## **語法** transform: none|*transform-functions*; ``` div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ } ``` | transform的transform-functions值 | 描述 | | --- | --- | | none | 定義不進行轉換。 | | matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 | | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 | | translate(x,y) | 定義 2D 轉換。 | | translate3d(x,y,z) | 定義 3D 轉換。 | | translateX(x) | 定義轉換，只是用 X 軸的值。 | | translateY(y) | 定義轉換，只是用 Y 軸的值。 | | translateZ(z) | 定義 3D 轉換，只是用 Z 軸的值。 | | scale(x\[,y\]?) | 定義 2D 縮放轉換。 | | scale3d(x,y,z) | 定義 3D 縮放轉換。 | | scaleX(x) | 通過設置 X 軸的值來定義縮放轉換。 | | scaleY(y) | 通過設置 Y 軸的值來定義縮放轉換。 | | scaleZ(z) | 通過設置 Z 軸的值來定義 3D 縮放轉換。 | | rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 | | rotate3d(x,y,z,angle) | 定義 3D 旋轉。 | | rotateX(angle) | 定義沿著 X 軸的 3D 旋轉。 | | rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉。 | | rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉。 | | skew(x-angle,y-angle) | 定義沿著 X 和 Y 軸的 2D 傾斜轉換。 | | skewX(angle) | 定義沿著 X 軸的 2D 傾斜轉換。 | | skewY(angle) | 定義沿著 Y 軸的 2D 傾斜轉換。 | | perspective(n) | 為 3D 轉換元素定義透視視圖。 | **效果：**[https://www.cnblogs.com/lichihua/p/10807088.html](https://www.cnblogs.com/lichihua/p/10807088.html) 前置屬性： **transform-origin**更改一個元素變形的原點 **transform-style** 設置元素的子元素是位于 3D 空間中還是平面中 * flat：平面，如果選擇平面即此值，元素的子元素將不會有 3D 的遮擋關系 * preserve-3d： **perspective**：指定了觀察者與 z=0 平面的距離即開啟網頁的透視功能 **perspective-origin**：指定了觀察者的位置，用作 perspective 屬性的消失點。 **backface-visibility**：指定當元素背面朝向觀察者時是否可見 2D變形： translate scale rotate skew matrix 3D變形： translate3d scale3d rotate3d matrix3d 平移： ``` <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width: 100px;height: 100px;background-color:#bfa; transform: translate(20px,40px)"></div> </div> ``` <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width: 100px;height: 100px;background-color:#bfa; transform: translate(20px,40px)"></div> </div> 旋轉 ``` <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width:100px;height:100px;background-color:#bfa;transform:rotate(7deg);"></div> </div> ``` <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width:100px;height:100px;background-color:#bfa;transform:rotate(7deg);"></div> </div> <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width:100px;height:100px;background-color:#bfa;transform: matrix(1, 2, 3, 4, 5, 6);"></div> </div>