最近一直在系統的復習前端基礎知識， 不復習的時候不知道 一旦系統的復習才知道 原來自己對很多知識還是處于一知半解的地步，好吧 話不多說 開始寫吧：

一、 過渡

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.2、 介紹過渡可選用的屬性

那么關于過渡，需要掌握的知識點有哪些呢？

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

1.3、 transition-property

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

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

1.4、 transition-duration

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

1.5、 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.6、transition-delay

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

1.7、 來搞個例子吧

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

// 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支持該屬性就能被觸發。

二、 2d變換基礎方法

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

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

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

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

2.1、 translate

首先關于關于translate這個方法而言，本身就有兩個子方法：

• translateX 這個方法只有一個參數，表示沿x軸的平移量
• translateY 這個方法也只有一個參數，表示沿y軸的平移量 而translate是上面兩個方法的簡寫形式，可以接收兩個參數，前者是x軸的平移量，后者是沿y軸的平移量。如果只傳一個值，缺省值默認為0。具體的代碼,前面代碼、效果已經展示過了我就不多說了。

2.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.3、 rotate

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

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

效果如下：

2.4、 skew

關于skew來說而言，本身也有兩個子方法：

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

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

效果如下：

這里值得我們的注意的是沿著哪個軸傾斜，就是被傾斜邊與坐標軸之間的夾腳的角度。

三、原點位置

我們這里有這樣一個需求：就是在我們的旋轉操作中，我們不希望從，從元素的中心點開始旋轉，這就觸發了我們接下來的一個屬性：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%

四、 矩陣變換（matrix）

最后我們來說一說矩陣變換吧，這是一個比較復雜的章節。

4.1、 矩陣變換的原理

首先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.1、用矩陣變換實現平移變換

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

這里值得我們注意的點就是：讓 a=1,b=0,c=0,d=1的情況下，e，f就相當于translate的兩個參數。 經過計算 e=20,f=20。

4.2、用矩陣變換實現縮放變換

問題：我們想讓元素的寬度成為原來的2倍，寬是原來的3倍？ 同樣值得我們注意的是：只要讓 b = 0，c = 0，e = 0，f = 0，那么 a，d 就相當于scale()的兩個參數 經過計算得到 a=2,d=3

4.2、用矩陣變換實現旋轉變換

問題：我們想讓元素旋轉指定度數怎么做？ 我們這里的計算公司相當于：

x' =x*cosθ - y*sinθ y' = x*sinθ + y*cosθ 復制代碼

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

這里值得我們深度深思的是，旋轉360度 如何做呢？

4.2、用矩陣變換實現傾斜變換

這個的計算公式相當于 x’ = x + ytanθx y’ = xtanθy + y

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

4.3、總結

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

說在最后

關于過渡和2d動畫這一塊，我覺得應該是每個前端工程師必須熟練使用的東西，怎么說呢？現在的app 要想使用戶體驗更加的友好 最好的方式就是給界面轉換、數據加載加上一個緩沖頁面 而不是干巴巴的純數據展示，這樣不僅對用戶，而且對自己審美也是一種很好的享受。好了 好了，不多說了，終于寫完了，都快12點半了，我先睡覺了

轉載于:https://juejin.im/post/5cdd494ee51d456e671c7ea1

總結

以上是生活随笔為你收集整理的从头开始复习css之2D变换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。