如果沒有CSS轉換，轉換屬性只能將其應用到的對象翻轉。所以，在現實生活中，這兩種選擇是一起應用的。
只是變換
這個屬性擁有的權力:
rotate(angle),
skew(angle),
translate(x,y),
scale(x,y),
matrix(n,n,n,n,n,n).
除了maybematrix之外，所有的值都是很清楚的。
旋轉和傾斜選項使用角度度數(值可以是負數，可以輸入超過360度)。例如，輸入1080deg進行三個完整的旋轉。
scale選項只使用數字，並且根據給定的寬度和高度的參數定義該對象的增加/減少程度。
所有這些屬性接受矩陣(仍可能不是self-explained)和X和Y有特殊選項添加到語法,在這種情況下,只需要一個參數和屬性,在旋轉和傾斜的情況下,變得相對於X或Y軸(例如translateX(),寫入scaleY()等)。
矩陣選項可以做所有事情(你期望的更少嗎?)確切的語法是矩陣(scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY())。即使裡面沒有旋轉選項，它也可以旋轉。我不能說更多(因為這是數學……請查看此郵件以獲取更多信息。
還可以通過在一個轉換中定義多個轉換組合。
div {
transform: rotate(90deg) scale(2) translateY(-50%) translateX(50%);
}
這一特性最近被用於的最流行的效果是，主要是旋轉導航、社交和其他信息，並使它們垂直。在下面的兩個例子中，我們使用了transform: rotate(-90deg)屬性。
3D變換
2D屬性值rotate，translate，scale和matrix具有加入它們與z軸平行的3D值。額外的3D屬性是perspective，它定義了3D變換元素的透視圖。Perspective使用一個值來定義元素距視圖的距離。
我相信在理解2D選項之後，所有這些都是不言自明的。
Transition + Transform
該transform屬性用於定義元素的兩個狀態之間的轉換。與transition他們一樣，他們成為一對強大的夫妻，正如開頭提到的那樣。
.box {
...
background-color: #0000FF;
-webkit-transition:background-color 2s, -webkit-transform 2s;
transition:background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
這種組合是transform和transition屬性最常見的用法 。記住在第一個狀態transform 中將轉換定義為值並在第二個狀態中定義轉換非常重要。
閱讀更多 愛碼農 的文章
