之前我們說過了H5給我們帶來了很多實用性的變化 ,也說了C3給我們新提供的一些選擇器 和一些偽元素選擇器的改動 ,讓我們在製作網頁變得更加便利.
那麼今天我們就來說說CSS3中具有顛覆性的特徵 , 它就是2D , 3D , 動畫等功能 , 在沒有JS的情況下就能做出動態的頁面.
那下面我們來了解一下CSS3中的2D 轉換的使用
1.CSS3中的2D 轉換
轉換（transform）是CSS3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、縮放等效果
轉換（transform）你可以簡單理解為變形 ,它擁有3個屬性:
移動：translate
旋轉：rotate
縮放：scale
想要運用轉換 ,我們就必須熟悉坐標系 , 2D轉換是改變標籤在二維平面上的位置和形狀的一種技術，先來熟悉一下二維坐標系 ,我們的網頁窗口就像一個二維坐標 , 以盒子的左上角為原點讓我們的盒子在網頁中實現位移、旋轉、縮放等效果 ,下面讓我們看看它是怎麼來實現的 .
(1)移動(translate)
2D移動是2D轉換裡面的一種功能，可以改變元素在頁面中的位置，類似定位。
使用2d移動的步驟：
1.給元素添加 轉換屬性transform
2.語法
transform: translate(x,y);
transform: translateX(x);
transform: translatxeY(y);
屬性值為translate(x,y)如 transform:translate(50px,50px);y軸向下是正(-50px向上移動) ,x軸向左是正向右為負
定義 2D 轉換中的移動，沿著 X 和 Y 軸移動元素
translate最大的優點：不會影響到其他元素的位置 ,比如浮動和定位都會影響周圍盒子的布局
translate也可以用百分比來表示其中的百分比單位是相對於自身元素的 translate:(50%,50%);
(2)2D 轉換之旋轉 rotate
2D旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。
用法:
transform:rotate(度數)rotate裡面跟度數， 單位是 deg 比如 rotate(45deg)或者rotate(-45deg)角度為正時，順時針，負時，為逆時針默認旋轉的中心點是元素的中心點
元素旋轉默認的是中心點 ,但是這個點是可以改變的 ,我們可以通過2D 轉換中心點 transform-origin來設置中心點
transform-origin: x y;這裡的x和y可以用百分比 , 像素 ,或者left right等來表示
比如:transform-origin:50% 50%; transform-origin:top left;左上角 transform-origin:50px 50px;
(3)2D 轉換之縮放scale
縮放，顧名思義，可以放大和縮小。 只要給元素添加上了這個屬性就能控制它放大還是縮小。
注意:
1.其中的x和y用逗號分隔
2.transform:scale(1,1) ：寬和高都放大一倍，相對於沒有放大
3.transform:scale(2,2) ：寬和高都放大了2倍
4.transform:scale(2) ：只寫一個參數，第二個參數則和第一個參數一樣，相當於 scale(2,2)
5.transform:scale(0.5,0.5)：縮小
6.sacle縮放最大的優勢：可以設置轉換中心點縮放，默認以中心點縮放的，而且不影響其他盒子
注意：
1. 同時使用多個轉換，其格式為：transform: translate() rotate() scale() ...等
2. 其順序會影轉換的效果。（先旋轉會改變坐標軸方向）
3.當我們進行聯寫時，同時有位移和其他屬性的時候，記得要將位移放到最前
CSS3具有顛覆性特徵的2D轉換就這麼多了,之後我們再配合CSS3的動畫,就能做出許多不錯的網頁動畫了 , 希望大家多多關注 ,支持一下 , 我們一起學習交流.