從頭開始複習css之2D變換

最近一直在系統的複習前端基礎知識， 不復習的時候不知道 一旦系統的複習才知道 原來本身對不少知識仍是處於只知其一;不知其二的地步，好吧 話很少說 開始寫吧：

1、 過渡

1.一、 過渡是什麼？

首先關於過渡，過渡是一個什麼東西呢？我感受用語言來描述是很蒼白的，咱們直接來看下面一段代碼：

// css
.test {
  width: 200px;
  height: 200px;
  background-color: red;
}
.test:hover {
  height: 400px;
}
// html
<div class="test"></div>
複製代碼

代碼的意思是在鼠標放在元素上面的時候，就會改變元素的高度，具體的效果以下：

咱們發現：在鼠標hover的時候，元素一瞬間高度變化，緊接着咱們在其基礎上面增長過渡的代碼：

transition: height 2s;
複製代碼

效果以下：

從上面的效果，咱們能夠看出來沒加過渡和加過渡的以後的效果差距，過渡效果就像在變換的過程當中增長緩衝效果，也就是說過渡就是 元素從一種樣式逐漸改變爲另外一種的效果。

1.二、 介紹過渡可選用的屬性

那麼關於過渡，須要掌握的知識點有哪些呢？

• transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性，依次是下面幾個元素
• transition-property 規定應用過渡的 CSS 屬性的名稱。
• transition-duration 定義過渡效果花費的時間。默認是 0。
• transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"
• transition-delay 規定過渡效果什麼時候開始。默認是 0

1.三、 transition-property

transition-property屬性規定應用過渡效果的css屬性的名稱，當指定css屬性值發生改變的時候，過渡效果將會觸發。 其可選值是：

• **none：**沒有屬性會觸發過渡效果
• **all：**全部的屬性變化都會觸發過渡效果
• **property：**定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

1.四、 transition-duration

transition-duration屬性規定完成過渡效果須要花費的時間。默認值是0.

1.五、 transition-timing-function

transition-timing-function屬性規定過渡效果的速度曲線。其可選值有：

• linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
• **ease ** 規定慢速開始，而後變快，而後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
• ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
• ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值。 這裏值得咱們注意的是：最後一個速度的值能夠在賽貝爾曲線官網上自行選取。

1.六、transition-delay

transition-delay 屬性規定過渡效果什麼時候開始。通俗點說就是設置變換的延時時間。

1.七、 來搞個例子吧

說了這麼概念性的問題，接下來看一段代碼：

// css
		.runn-area{
			background: skyblue;
			padding: 2px 4px
		}
		.runn-area:hover>.test{
			transform: translateX(80px);
		}
		.runn-area:hover>.test3{
			transform: translate(80px,0) rotate(360deg);
		}
		.test {
			width: 12px;
			height: 12px;
			background-color: red;
			transition: height 2s;
			margin-top: 10px;
			color:white;
			font-size: 12px
		
		}
		.test1 {
			transition-property: transform;
			transition-duration: 1s;
			transition-timing-function: ease;
			transition-delay: 0.5s;
		}
		.test2 {
			transition-property: width;
			transition-duration: 1s;
			transition-timing-function: linear;
			transition-delay: 0.5s;
		}
		.test3 {
			transition-property: all;
			transition-duration: 1s;
			transition-timing-function: ease-in-out;
			transition-delay: 0.5s;

		}
		.test4 {
			
			transition-property: transform;
			transition-duration: 1s;
			transition-timing-function: cubic-bezier(0,.67,.87,.06);
			transition-delay: 0.5s;

		}
		.test5 {
			transition-property: transform;
			transition-duration: 1s;
			transition-timing-function: ease-out;
			transition-delay: 0.5s;
		}
// html
	<div class="runn-area">
		<div class="test1 test"></div>
		<div class="test2 test"></div>
		<div class="test3 test"></div>
		<div class="test4 test"></div>
		<div class="test5 test"></div>
	</div>	
複製代碼

效果以下：

上面咱們分別用了不一樣的transition-property給你們一個不同的速度感覺，能讓你們更好的去理解transition-property這個屬性。值得咱們注意的是：test2元素並無過渡效果，這裏咱們發現指定的width，而元素產生的變化確實作的平移變換，因此沒有了效果。test3既有平移效果，也有旋轉效果，若是想有多種效果的話，用空格作分隔，只要transition-property支持該屬性就能被觸發。

2、 2d變換基礎方法

前面在咱們的過渡中用到了一個平移的方法，那麼咱們確定不能只知足於平移，確定還想知道更多平面上的變換動畫。

2.一、 2d平面基礎中有哪些辦法：

關於平面2d變換中 主要有一下幾個方法：

• translate：平移
• scale： 縮放
• rotate：旋轉
• skew： 傾斜

2.一、 translate

首先關於關於translate這個方法而言，自己就有兩個子方法：

• translateX 這個方法只有一個參數，表示沿x軸的平移量
• translateY 這個方法也只有一個參數，表示沿y軸的平移量 而translate是上面兩個方法的簡寫形式，能夠接收兩個參數，前者是x軸的平移量，後者是沿y軸的平移量。若是隻傳一個值，缺省值默認爲0。具體的代碼,前面代碼、效果已經展現過了我就很少說了。

2.二、 scale

關於scale來講而言，自己也有兩個子方法：

• scaleX：定義 2D 縮放轉換，改變元素的寬度。
• scaleY：定義 2D 縮放轉換，改變元素的高度。 而 scale是上面兩個方法的簡寫形式，能夠接收兩個參數，分別表明改變元素的寬度和高度。來看下面一個一段代碼：

<div class="test"></div>
		body:hover>.test{
			transform: scale(4,4);
		}
		.test{
			width: 100px;
			height: 100px;
			background-color: red;
			transition: transform 2s
		}
複製代碼

2.三、 rotate

rotate主要用來定義 2D 旋轉，在參數中規定角度。修改一下上面的代碼

body:hover>.test{
			transform: rotate(360deg)
		}
複製代碼

效果以下：

2.四、 skew

關於skew來講而言，自己也有兩個子方法：

• skewX：定義 2D 傾斜轉換，沿着 X 軸。
• skewY：定義 2D 傾斜轉換，沿着 Y 軸。 而 skew是上面兩個方法的簡寫形式，能夠接收兩個參數，分別表明改變元素的沿着x,y軸的傾斜角度。修改一下上面的代碼：

body:hover>.test{
			transform: skew(60deg,60deg);
		}
複製代碼

效果以下：

這裏值得咱們的注意的是沿着哪一個軸傾斜，就是被傾斜邊與座標軸之間的夾腳的角度。

3、原點位置

咱們這裏有這樣一個需求：就是在咱們的旋轉操做中，咱們不但願從，從元素的中心點開始旋轉，這就觸發了咱們接下來的一個屬性：transform-origin。咱們仍是老樣子，修改一下上面的的代碼來演示這個屬性的做用：

.test{
			width: 40px;
			height: 40px;
			background-color: red;
			transition: transform 2s;
			transform-origin: 0 0;
		}
		.body:hover>.test{
			transform: rotate(360deg);
			background-color: white;
		}
複製代碼

效果以下：

從上面的效果圖咱們能夠發現，該屬性是用來更改一個元素變形的原點。 該元素在平面上能夠接收兩個值，表明變換的中心點（用x-axis和y-axis來表示），其可選用的格式類型有： x-axis:定義視圖被置於 X 軸的何處。可能的值： |left|center|right|length|%|默認值50% y-axis:定義視圖被置於 Y 軸的何處。可能的值： |top|center|bottom|length|%|默認值50%

4、 矩陣變換（matrix）

最後咱們來講一說矩陣變換吧，這是一個比較複雜的章節。

4.一、 矩陣變換的原理

首先matrix函數接收6個參數，咱們就用a,b,c,f,e,f來指代，將這6個參數組合成矩陣以下：

其中矩陣變換的原理是：

x，y表示變換前元素某一點在局部座標系中的橫縱座標。x'，y' 表示變換後的座標。其轉化的公式爲：

x' = ax + cy + e y' = bx + dy + f
複製代碼

經過上面的計算方法咱們就能計算出a,b,c,d,c,e,f的值 而後填寫進去就好了。

4.一、用矩陣變換實現平移變換

問題：咱們想讓基點爲(10px,10px)的元素平移到（30px,30px）。

這裏值得咱們注意的點就是：讓 a=1,b=0,c=0,d=1的狀況下，e，f就至關於translate的兩個參數。 通過計算 e=20,f=20。

4.二、用矩陣變換實現縮放變換

問題：咱們想讓元素的寬度成爲原來的2倍，寬是原來的3倍？ 一樣值得咱們注意的是：只要讓 b = 0，c = 0，e = 0，f = 0，那麼 a，d 就至關於scale()的兩個參數 通過計算獲得 a=2,d=3

4.二、用矩陣變換實現旋轉變換

問題：咱們想讓元素旋轉指定度數怎麼作？ 咱們這裏的計算公司至關於：

x' =x*cosθ - y*sinθ y' =  x*sinθ + y*cosθ
複製代碼

值得注意的一點是旋轉度數的時候，直接將a = cosθ，b = sinθ，c = - sinθ ，d = cosθ， e = 0,，f = 0

這裏值得咱們深度深思的是，旋轉360度 如何作呢？

4.二、用矩陣變換實現傾斜變換

這個的計算公式至關於 x’ = x + ytanθx y’ = xtanθy + y

值得注意的一點是旋轉度數的時候，直接將a = 1，b = tanθy，c = tanθx，d = 1， e = 0,，f = 0

4.三、總結

總的來講呢，關於矩陣變換的最佳記憶方式能夠用下面的方式來記憶： a 水平縮放，b 水平傾斜，c 垂直傾斜，d 垂直縮放，e 水平移動，f 垂直移動

說在最後

關於過渡和2d動畫這一塊，我以爲應該是每一個前端工程師必須熟練使用的東西，怎麼說呢？如今的app 要想使用戶體驗更加的友好 最好的方式就是給界面轉換、數據加載加上一個緩衝頁面 而不是乾巴巴的純數據展現，這樣不只對用戶，並且對本身審美也是一種很好的享受。好了 好了，很少說了，終於寫完了，都快12點半了，我先睡覺了