了解CSS3中那些顛覆性的變化之2D轉換

之前我們說過了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軸向左是正向右為負

給盒子加transform向下向左移動50

定義 2D 轉換中的移動，沿著 X 和 Y 軸移動元素

translate最大的優點：不會影響到其他元素的位置 ,比如浮動和定位都會影響周圍盒子的布局

translate也可以用百分比來表示其中的百分比單位是相對於自身元素的 translate:(50%,50%);

(2)2D 轉換之旋轉 rotate

2D旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。

用法:

transform:rotate(度數)rotate裡面跟度數， 單位是 deg 比如 rotate(45deg)或者rotate(-45deg)角度為正時，順時針，負時，為逆時針默認旋轉的中心點是元素的中心點

網頁中可以看到變化角度盒子就會xuan'z

元素旋轉默認的是中心點 ,但是這個點是可以改變的 ,我們可以通過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的動畫,就能做出許多不錯的網頁動畫了 , 希望大家多多關注 ,支持一下 , 我們一起學習交流.