2D轉換

通過 CSS3 轉換，能夠對元素進行移動、縮放、轉動、拉長或拉伸。

1.旋轉,deg表示角度。負的為逆時針轉動，默認沿著中心點旋轉。可以利用 transform-origin 設置旋轉原點。

transform: rotate(30deg);

2.用來設置變形原點，變形時以這個點為基準點，默認為50% 50%。

transform-origin: 100% 0;

3.平移變形，兩個參數分別為橫向偏移量和縱向偏移量。偏移量也可以是百分比,表示偏移相對自身尺寸的百分比。

transform:translate(50%,50%); 

通過這個屬性可以使元素水平和垂直居中：

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
 

4.縮放變形，兩個參數分別表示橫向縮放量和縱向縮放量，小於1表示縮小，大於1表示放大，總之縮放之後為原尺寸的多少倍 ，變形會使元素中的內容也變形。

transform: scale(1.3,1.3);

3D轉換

沿X軸旋轉 :

transform: rotateX(-180deg);

類似的，還有 rotateY( ); rotateZ( );

總之，以上2D轉換的效果都有相應的3D轉換，比如3D旋轉，平移，縮放。

設置視野距離:

perspective: 200px;

CSS3裏的2D/3D 轉換