从头开始复习css之2D变换
最近一直在系統(tǒng)的復(fù)習(xí)前端基礎(chǔ)知識， 不復(fù)習(xí)的時候不知道 一旦系統(tǒng)的復(fù)習(xí)才知道 原來自己對很多知識還是處于一知半解的地步，好吧 話不多說 開始寫吧：
一、 過渡
1.1、 過渡是什么？
首先關(guān)于過渡，過渡是一個什么東西呢？我感覺用語言來描述是很蒼白的，我們直接來看下面一段代碼：
// css .test {width: 200px;height: 200px;background-color: red; } .test:hover {height: 400px; } // html <div class="test"></div> 復(fù)制代碼代碼的意思是在鼠標(biāo)放在元素上面的時候，就會改變元素的高度，具體的效果如下：
我們發(fā)現(xiàn)：在鼠標(biāo)hover的時候，元素一瞬間高度變化，緊接著我們在其基礎(chǔ)上面增加過渡的代碼：
transition: height 2s; 復(fù)制代碼效果如下：
從上面的效果，我們可以看出來沒加過渡和加過渡的之后的效果差距，過渡效果就像在變換的過程中增加緩沖效果，也就是說過渡就是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。1.2、 介紹過渡可選用的屬性
那么關(guān)于過渡，需要掌握的知識點有哪些呢？
- transition 簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性，依次是下面幾個元素
- transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。
- transition-duration 定義過渡效果花費的時間。默認是 0。
- transition-timing-function 規(guī)定過渡效果的時間曲線。默認是 "ease"
- transition-delay 規(guī)定過渡效果何時開始。默認是 0
1.3、 transition-property
transition-property屬性規(guī)定應(yīng)用過渡效果的css屬性的名稱，當(dāng)指定css屬性值發(fā)生改變的時候，過渡效果將會觸發(fā)。 其可選值是：
- **none：**沒有屬性會觸發(fā)過渡效果
- **all：**所有的屬性變化都會觸發(fā)過渡效果
- **property：**定義應(yīng)用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。
1.4、 transition-duration
transition-duration屬性規(guī)定完成過渡效果需要花費的時間。默認值是0.
1.5、 transition-timing-function
transition-timing-function屬性規(guī)定過渡效果的速度曲線。其可選值有：
- linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
- **ease ** 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。 這里值得我們注意的是：最后一個速度的值可以在賽貝爾曲線官網(wǎng)上自行選取。
1.6、transition-delay
transition-delay 屬性規(guī)定過渡效果何時開始。通俗點說就是設(shè)置變換的延時時間。
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> 復(fù)制代碼效果如下：
上面我們分別用了不同的transition-property給大家一個不一樣的速度感受，能讓大家更好的去理解transition-property這個屬性。值得我們注意的是：test2元素并沒有過渡效果，這里我們發(fā)現(xiàn)指定的width，而元素產(chǎn)生的變化確實做的平移變換，所以沒有了效果。test3既有平移效果，也有旋轉(zhuǎn)效果，如果想有多種效果的話，用空格做分隔，只要transition-property支持該屬性就能被觸發(fā)。
二、 2d變換基礎(chǔ)方法
前面在我們的過渡中用到了一個平移的方法，那么我們肯定不能只滿足于平移，肯定還想知道更多平面上的變換動畫。
2.1、 2d平面基礎(chǔ)中有哪些辦法：
關(guān)于平面2d變換中 主要有一下幾個方法：
- translate：平移
- scale： 縮放
- rotate：旋轉(zhuǎn)
- skew： 傾斜
2.1、 translate
首先關(guān)于關(guān)于translate這個方法而言，本身就有兩個子方法：
- translateX 這個方法只有一個參數(shù)，表示沿x軸的平移量
- translateY 這個方法也只有一個參數(shù)，表示沿y軸的平移量 而translate是上面兩個方法的簡寫形式，可以接收兩個參數(shù)，前者是x軸的平移量，后者是沿y軸的平移量。如果只傳一個值，缺省值默認為0。具體的代碼,前面代碼、效果已經(jīng)展示過了我就不多說了。
2.2、 scale
關(guān)于scale來說而言，本身也有兩個子方法：
- scaleX：定義 2D 縮放轉(zhuǎn)換，改變元素的寬度。
- scaleY：定義 2D 縮放轉(zhuǎn)換，改變元素的高度。 而 scale是上面兩個方法的簡寫形式，可以接收兩個參數(shù)，分別代表改變元素的寬度和高度。來看下面一個一段代碼：
2.3、 rotate
rotate主要用來定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。修改一下上面的代碼
body:hover>.test{transform: rotate(360deg)} 復(fù)制代碼效果如下：
2.4、 skew
關(guān)于skew來說而言，本身也有兩個子方法：
- skewX：定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸。
- skewY：定義 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。 而 skew是上面兩個方法的簡寫形式，可以接收兩個參數(shù)，分別代表改變元素的沿著x,y軸的傾斜角度。修改一下上面的代碼：
效果如下：
這里值得我們的注意的是沿著哪個軸傾斜，就是被傾斜邊與坐標(biāo)軸之間的夾腳的角度。三、原點位置
我們這里有這樣一個需求：就是在我們的旋轉(zhuǎn)操作中，我們不希望從，從元素的中心點開始旋轉(zhuǎn)，這就觸發(fā)了我們接下來的一個屬性：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;} 復(fù)制代碼效果如下：
從上面的效果圖我們可以發(fā)現(xiàn)，該屬性是用來更改一個元素變形的原點。 該元素在平面上可以接收兩個值，代表變換的中心點（用x-axis和y-axis來表示），其可選用的格式類型有： x-axis:定義視圖被置于 X 軸的何處。可能的值： |left|center|right|length|%|默認值50% y-axis:定義視圖被置于 Y 軸的何處。可能的值： |top|center|bottom|length|%|默認值50%四、 矩陣變換（matrix）
最后我們來說一說矩陣變換吧，這是一個比較復(fù)雜的章節(jié)。
4.1、 矩陣變換的原理
首先matrix函數(shù)接收6個參數(shù)，我們就用a,b,c,f,e,f來指代，將這6個參數(shù)組合成矩陣如下：
其中矩陣變換的原理是：x，y表示變換前元素某一點在局部坐標(biāo)系中的橫縱坐標(biāo)。x'，y' 表示變換后的坐標(biāo)。其轉(zhuǎn)化的公式為：
x' = ax + cy + e y' = bx + dy + f 復(fù)制代碼通過上面的計算方法我們就能計算出a,b,c,d,c,e,f的值 然后填寫進去就行了。
4.1、用矩陣變換實現(xiàn)平移變換
問題：我們想讓基點為(10px,10px)的元素平移到（30px,30px）。
這里值得我們注意的點就是：讓 a=1,b=0,c=0,d=1的情況下，e，f就相當(dāng)于translate的兩個參數(shù)。 經(jīng)過計算 e=20,f=20。
4.2、用矩陣變換實現(xiàn)縮放變換
問題：我們想讓元素的寬度成為原來的2倍，寬是原來的3倍？ 同樣值得我們注意的是：只要讓 b = 0，c = 0，e = 0，f = 0，那么 a，d 就相當(dāng)于scale()的兩個參數(shù) 經(jīng)過計算得到 a=2,d=3
4.2、用矩陣變換實現(xiàn)旋轉(zhuǎn)變換
問題：我們想讓元素旋轉(zhuǎn)指定度數(shù)怎么做？ 我們這里的計算公司相當(dāng)于：
x' =x*cosθ - y*sinθ y' = x*sinθ + y*cosθ 復(fù)制代碼值得注意的一點是旋轉(zhuǎn)度數(shù)的時候，直接將a = cosθ，b = sinθ，c = - sinθ ，d = cosθ， e = 0,，f = 0
這里值得我們深度深思的是，旋轉(zhuǎn)360度 如何做呢？
4.2、用矩陣變換實現(xiàn)傾斜變換
這個的計算公式相當(dāng)于 x’ = x + ytanθx y’ = xtanθy + y
值得注意的一點是旋轉(zhuǎn)度數(shù)的時候，直接將a = 1，b = tanθy，c = tanθx，d = 1， e = 0,，f = 0
4.3、總結(jié)
總的來說呢，關(guān)于矩陣變換的最佳記憶方式可以用下面的方式來記憶： a 水平縮放，b 水平傾斜，c 垂直傾斜，d 垂直縮放，e 水平移動，f 垂直移動
說在最后
關(guān)于過渡和2d動畫這一塊，我覺得應(yīng)該是每個前端工程師必須熟練使用的東西，怎么說呢？現(xiàn)在的app 要想使用戶體驗更加的友好 最好的方式就是給界面轉(zhuǎn)換、數(shù)據(jù)加載加上一個緩沖頁面 而不是干巴巴的純數(shù)據(jù)展示，這樣不僅對用戶，而且對自己審美也是一種很好的享受。好了 好了，不多說了，終于寫完了，都快12點半了，我先睡覺了
轉(zhuǎn)載于:https://juejin.im/post/5cdd494ee51d456e671c7ea1
總結(jié)
以上是生活随笔為你收集整理的从头开始复习css之2D变换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在 Mac上压缩的压缩包 在window
- 下一篇： 云际视界视频会议开创远程商务新模式