在介紹有關transform相關的知識之前，先來講一下transform-origin的用法以及關於<angle>角度的幾種取值單位。另外，在使用時，為了兼容各個瀏覽器，可加上瀏覽器的私有前綴［－moz- -webkit -ms-］。
transform-origin
設置對象變換的原點，通常和rotate旋轉、scale縮放、skew斜切等一起使用，IE9+
2D情況下：默認值 50% 50%，即center center
3D情況下：默認值 50% 50% 0
取值介紹：
- X軸：left｜center｜right｜length｜%
- Y軸：top｜center｜bottom｜length｜%
- Z軸：length
注意：如果只設置一個值，則該值作用於橫坐標，縱坐標默認50%，Z軸默認為0，另外百分比是相對於自身進行計算的。
如：
{
transform: rotate(45deg);
transform-origin: 0 0;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 0 0;
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin: 0 0;
-webkit-transform: rotate(45deg); /* Safari Opera and Chrome */
-webkit-transform-origin: 0 0;
}
效果圖：
角度的單位
CSS3新增，角度單位有四種，在所有可使用角度的地方均可使用這四種單位，但是需要注意兼容性，除turn單位外其他單位均可兼容IE9+瀏覽器版本。
單位說明：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
單位說明
deg度數，一個圓共360度，IE9+
grad梯度，一個圓共400梯度，IE9+
rad弧度，一個圓共2n弧度，IE9+
turn轉、圈，一個圓共1轉，IE＋ FireFox13.0+
transform
變換，可對元素進行位移、旋轉、縮放、傾斜操作，支持2D或者3D轉換，IE9+支持。
目錄
- translate 位移
- rotate 旋轉
- scale 縮放
- skew 斜切
- 變換綜合應用
translate 位移
對象進行2D空間或3D空間的位移。 使用規則：
translate(): 第一個參數指定X軸的位移量[必須], 第二個參數指定Y軸的位移量[當不設置時, 默認為0];
translateX(): 指定X軸的位移;
translateY(): 指定Y軸的位移;
translate3D(): 第一個參數指定X軸的位移量, 第二個參數指定Y軸的位移量, 第三個參數指定Z軸的位移量, 3個參數缺一不可;
translateZ(): 指定Z軸的位移;
使用translate時需要注意位移量的百分比是相對元素自身寬高來計算的。
translate有一個最常見的應用，即當元素寬度高度不固定時，使用translate可實現水平以及垂直方向的居中。
代碼示例：
dom結構<div class="box"> <div class="item">center</div> </div>
樣式設計.box{ position: relative; width: 300px; height: 300px; border: 1px solid; } .item{ position: absolute; padding: 50px; background-color: #fb3; top: 50%; /*相對於父級*/ left: 50%; transform: translate(-50%, -50%); /*相對自身*/ -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
效果圖：
rotate 旋轉
對象進行2D空間或3D空間旋轉。常與 transform-origin 一起使用。
使用規則：
rotate(): 2D旋轉，根據指定的旋轉角度進行旋轉;
rotate3D(): 3D旋轉，必須指定四個參數，前3個參數分別表示旋轉的方向x y z, 第4個參數表示旋轉的角度;
rotateX(): 指定X軸的旋轉角度;
rotateY(): 指定Y軸的旋轉角度;
rotateZ(): 指定Z軸的旋轉角度;
使用rotate時需要注意以下幾點：
- 旋轉角度必須有單位，否則將報錯。
- rotate值為正值時，順時針旋轉；否則逆時針旋轉。
- 在2D情況下，rotate()只能指定一個參數；在3D情況下，rotate3D()必須指定四個參數，否則將報錯。
旋轉45度，代碼示例：
/* X軸旋轉45度 */ .item1{ transform: rotateX(-45deg); -moz-transform: rotateX(-45deg); -ms-transform: rotateX(-45deg); -webkit-transform: rotateX(-45deg); } /* Y軸旋轉45度 */ .item2{ transform: rotateY(-45deg); -moz-transform: rotateY(-45deg); -ms-transform: rotateY(-45deg); -webkit-transform: rotateY(-45deg); } /* Z軸旋轉45度 */ .item3{ transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); }
示例圖：
上述例子中的 rotateZ(-45deg);也可以寫成 rotate3D(0,0,1,-45deg);，當然相對於X軸、Y軸的也可使用rotate3d的簡寫形式。
另外，不難看出只指定Z軸的旋轉與2D旋轉的效果一致。即以下三種寫法得到的旋轉效果是一樣的：
transform: rotate(-45deg);
transform: rotate3D(0,0,1,-45deg);
transform: rotateZ(-45deg);
scale 縮放
對象進行2D空間或3D空間縮放。常與 transform-origin 一起使用。
使用規則：
scale(): 第一個參數指定X軸的縮放倍數[必須], 第二個參數指定Y軸的縮放倍數[當不設置時, 默認取第一個參數的值];;
scaleX(): 指定X軸的縮放倍數;
scaleY(): 指定Y軸的縮放倍數;
scale3D(): 第一個參數指定X軸的縮放倍數, 第二個參數指定Y軸的縮放倍數, 第三個參數指定Z軸的縮放倍數, 3個參數缺一不可;
scaleZ(): 指定Z軸的縮放倍數;
使用scale時需要注意以下幾點：
- 參數值為倍數，如：
scale(2);表示放大2倍。 - 參數值是分別相對元素的寬和高進行計算的。即便是scale只設置了一個值，那也是分別計算的。
- 參數值大於1表示放大；0～1之間為縮小；1表示不便；0的時候元素不可見。
- 參數值為負數時，除了元素的方向發生改變[x軸反轉]，其他規律與正值一致。
負值的情況，代碼示例：
dom結構<div class="box"> <div class="item">Item</div> </div>
樣式設計.box{ width: 300px; height: 300px; border: 1px solid; } .item{ width: 100px; height: 100px; line-height: 100px; text-align: center; background-color: #fb3; transform: scale(-1.2); -ms-transform: scale(-1.2); -moz-transform: scale(-1.2); -webkit-transform: scale(-1.2); }
效果圖：
圖中可看出，元素相對於x軸發生了反轉，但是縮放效果並沒有受影響。
skew 斜切
對象進行2D空間斜切。常與 transform-origin 一起使用。
使用規則：
skew(): 第一個參數對應X軸[必須], 第二個參數對應Y軸[當不設置時, 默認為0];; skewX(): 指定X軸的斜切; skewY(): 指定Y軸的斜切; 綜合應用
- 平行四邊形
- 梯形
- 菱形
- 折角
平行四邊形
原理：使用skew斜切來實現。
先看效果圖：
看到效果圖，最先想到的是對元素使用skew斜切效果。
簡單使用斜切代碼：
dom結構：<div class="btn">Home</div>
樣式設計：.btn{
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #fb3;
transform: skew(-45deg);
-moz-transform: skew(-45deg);
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
}
確實實現了平行四邊形的效果，但是里面的內容也被斜切了，並不完美。
下面介紹兩種方向來實現平行四邊形，且內容不會受影響。
第一種是比較常見的，嵌套一層結構，父元素進行斜切，子元素抵消掉斜切。
代碼：
dom結構：<div class=".box"> <div class="btn">home</div> </div>
樣式設計：.box{ width: 150px; height: 40px; text-align: center; line-height: 40px; background-color: #fb3; transform: skew(-45deg); -moz-transform: skew(-45deg); -ms-transform: skew(-45deg); -webkit-transform: skew(-45deg); } .btn{ transform: skew(45deg); -moz-transform: skew(45deg); -ms-transform: skew(45deg); -webkit-transform: skew(45deg); }
第二種方法是使用偽元素，將斜切背景應用在偽元素上。
代碼：
dom結構：<div class="btn">home</div>
樣式設計：.btn{ position: relative; width: 150px; height: 40px; text-align: center; line-height: 40px; } .btn:after{ position:absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #fb3; z-index: -1; /* 保證背景不會覆蓋住文字 */ transform: skew(-45deg); -moz-transform: skew(-45deg); -ms-transform: skew(-45deg); -webkit-transform: skew(-45deg); }
梯形
梯形的實現相對平行四邊形來說要復雜一些，需要借助perspective()透視來實現。
先看效果圖：
代碼：
dom結構：<div class="box">home</div>
基本樣式.box { position: relative; width: 200px; height: 60px; margin: 50px; line-height: 60px; text-align: center; }
下面來說明一下如何實現梯形效果：
和平行四邊形的原理一樣，梯形的背景仍要寫在偽元素上，以防止字體變形。
代碼如下：
.box:after { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: #fb3; transform: perspective(20px) rotatex(5deg); -moz-transform: perspective(20px) rotatex(5deg); -ms-transform: perspective(20px) rotatex(5deg); -webkit-transform: perspective(20px) rotatex(5deg); }
為更好的查看效果，可以給box加上半透明的背景，效果圖：
旋轉是以元素的中心線進行旋轉的，所以要修改一下旋轉原點，增加以下代碼：
transform-origin: bottom;
－moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-webkit-transform-origin: bottom;
在看效果圖：
這時可以發現，元素的高度已經嚴重縮水了，這時候可以使用scale進行y軸的縮放，修改transform代碼如下：
transform: perspective(20px) rotatex(5deg) scaley(1.3); －moz-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3); -ms-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3); -webkit-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3); 效果：
當然也可以利用修改transform-origin的值實現不同的梯形。
代碼如下[別忘記兼容性，加上瀏覽器前綴]：
右側直角
transform-origin: right;
transform: perspective(20px) rotatex(5deg); 左側直角 transform-origin: left; transform: perspective(20px) rotatex(5deg); 菱形
菱形的實現有兩種，第一種是有rotate結合scale實現，第二種是用clip-path實現。
首先對父級進行旋轉 代碼：
dom結構
<div class="box"> <img src=""> </div> 基本樣式設計：.box{ width: 200px; height: 200px; border: 1px solid; overflow: hidden; transform: rotate(45deg); -mos-transform: rotate(45deg); -mz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .box img{ width: 100%; }
效果圖：
現在可以加上scale屬性了，更改transform屬性為：
transform: rotate(-45deg) scale(1.41); 
但是這個方法有限制，每次必須要計算scale放大的比例，並且當圖片不是正方形時，就沒辦法實現較好的菱形效果。
第二種方案，使用clip-path實現。不需要嵌套任何元素。
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); 效果圖：
折角效果
如果是規則的折角圖案，如下圖所示，可直接用background實現，詳情可見文章背景應用
[代碼就不過多說明了]代碼示例：
dom結構
<div class="box"></div> 基本樣式 .box { width: 200px; height: 200px; background-color: #58a; /*hack 回退*/ background: linear-gradient(225deg, transparent 20px, rgba(0, 0, 0, .7) 0), linear-gradient(225deg, transparent 20px, yellowgreen 0); background-size: 28px, 100%; background-repeat: no-repeat; background-position: right top, center; } 不同角度的折角實現：
效果圖：
代碼：
.box{ position: relative; background-color: #58a; /*hack 回退*/ background: linear-gradient(-150deg, transparent 30px, yellowgreen 0); } .box:before { position: absolute; content: ''; width: 62px; height: 34px; top: 0; right: 0; background: linear-gradient(-30deg, transparent 30px, rgba(0, 0, 0, .7) 0); transform: rotate(-120deg); } 仍需要借助漸變色實現背景，然后旋轉。
也可以進行更多的優化，如陰影，圓角，效果圖如下：
