在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。
1、旋轉rotate() ：通過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），angle是指旋轉角度，如果設置的值爲正數表示順時針旋轉，負數則表示逆時針旋轉。如：transform:rotate(30deg)。
2、扭曲skew( [, ]) ：X軸Y軸上的skew transformation（斜切變換）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值爲0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，默認爲0deg。
3、縮放scale([, ])：提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。如果第二個參數未提供，則取與第一個參數一樣的值。scale(X,Y)是用於對元素進行縮放，可以通過transform-origin對元素的基點進行設置，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。並以X爲準。如：transform:scale(2,1.5)。
4、移動translate([, ]) ：通過矢量[tx, ty]指定一個2D translation，tx 是第一個過渡值參數，ty 是第二個過渡值參數選項。如果 未被提供，則ty以 0 作爲其值。也就是translate(x,y),它表示對象進行平移，按照設定的x,y參數值,當值爲負數時，反方向移動物體，其基點默認爲元素 中心點，也可以根據transform-origin進行改變基點。如transform:translate(100px,20px)。
5、矩陣變形matrix(, , , , , ) ： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3旋轉實例</title>
</head>
<style>
.photo-container {
perspective: 1200px; /* 透視視圖 */
width:45%;
float:left;
}
.rotate-box {
position:relative;
transform-style: preserve-3d; /* 3D 轉換 */
transition:1s ease; /* 轉換效果持續 1秒 */
margin:10%;
}
.rotate-box img {
width:100%;
height:auto;
}
.text {
position:absolute;top:0;
width:100%;height:100%;
transform: rotateY(180deg) translateZ(1px); /* 反轉180度 並設置z軸讓其置於圖片背面 */
color:#666;
text-align:center;
opacity:.06;
background:rgba(255,255,255,.9);
transition: 1s opacity;
}
.photo-container:hover .rotate-box{
transform: rotateY(180deg);
}
.photo-container:hover .text{
opacity:1;
}
.rotate-box:after {
content:' ';
display:block;
width:100%;
height:7vw; /* vw是移動設計備窗體單位*/
transform:rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); /* radial-gradient 是徑向漸變 */
}
</style>
<body>
<div class="photo-container">
<div class="rotate-box">
<img src="img/beijing.png"/>
<div class="text">
<h2>這是一個標題</h2>
<p>這是一段圖片相關的簡介內容。。</p>
</div>
</div>
</div>
</body>
</html>