一、CSS3中的變形

1）旋轉 rotate()

rotate()函數通過指定的角度參數使元素相對原點進行旋轉。

它主要在二維空間內進行操作，設置一個角度值，用來指定旋轉的幅度。

如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許對元素進行旋轉、縮放、移動或傾斜。

css代碼：

div {width: 200px;height: 200px;background: orange;-ms-transform:rotate(7deg); //-ms代表ie內核識別碼-moz-transform:rotate(7deg);//-moz代表火狐內核識別碼-webkit-transform:rotate(7deg);//-webkit代表谷歌內核識別碼-o-transform:rotate(7deg);//-o代表歐朋【opera】內核識別碼transform:rotate(7deg);//統一標識語句。。。最好這句話也寫下去，符合w3c標準 }

?

2) 扭曲 skew()

skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。

Skew()具有三種情況：

1、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；

第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。

2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

css代碼：

div{ -webkit-transform: skew(45deg);-moz-transform:skew(45deg) transform:skew(45deg); }

?

3)?縮放 scale()

scale()函數?讓元素根據中心原點對對象進行縮放。

縮放 scale 具有三種情況：

1、?scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）

注意：Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。

2、scaleX(x)元素僅水平方向縮放（X軸縮放）

3、scaleY(y)元素僅垂直方向縮放（Y軸縮放）

注意：?scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大于或等于1.01的值，作用是讓元素放大。

css代碼：

div{ -webkit-transform: scale(1.5,0.5);-moz-transform:scale(1.5,0.5)transform: scale(1.5,0.5); }

?

4) 位移?translate()

translate()函數可以將元素向指定的方向移動，類似于position中的relative。

或以簡單的理解為，使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。

translate我們分為三種情況：

1、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）

2、translateX(x)僅水平方向移動（X軸移動）

3、translateY(Y)僅垂直方向移動（Y軸移動）

關于translate和position：relative的區別：

相同點：兩者都是相對于本身移動位置

區別： 1、當元素原來已經有position:absolute的時候，這時候你想相對于本身移動，可以使用translate

2、做動畫的時候translate更適合，不會引起頁面的重排和重繪

3、關于transform類的，可以使用GPU加速，提高瀏覽器的性能。

總之：transform更適用于動畫

例：

html代碼：

<div class="wrapper"> 我不知道我的寬度和高是多少，我要實現水平垂直居中 </div>

css代碼：

.wrapper {padding: 20px;background:orange;color:#fff;position:absolute;top:50%;left:50%;border-radius: 5px;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%); }

注意：

1. top：50%，left：50%，是將色塊的左上角定位在了屏幕的中央，但是，整體并不在中央；
2. translate的百分比是根據自身的寬度和高度來定的，translate(-50%,-50%) 配合 top：50%，left：50% 實現了居中

?

5）矩陣?matrix()?

matrix()函數是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，

相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素。

a為元素的水平伸縮量，1為原始大小；
b為縱向扭曲，0為不變；
c為橫向扭曲，0不變；
d為垂直伸縮量，1為原始大小；
e為水平偏移量，0是初始位置；
f為垂直偏移量，0是初始位置

matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());

css代碼：

div{-webkit-transform: matrix(1,0,0,1,50,50);-moz-transform:matrix(1,0,0,1,50,50);transform: matrix(1,0,0,1,50,50); }

?

6) 原點 transform-origin

任何一個元素都有一個中心點，默認情況之下，其中心點是居于元素X軸和Y軸的50%處。

在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。但很多時候，可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。

transform-origin取值和元素設置背景中的background-position取值類似，如下表所示：

css代碼：

div {-webkit-transform-origin: left top;
-moz-transform-origin:left top;transform-origin: left top; }

?

二、CSS3中的動畫

在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是通過鼠標的單擊、獲得焦點，被點擊或對元素任何改變中觸發，并平滑地以動畫效果改變CSS的屬性值。

在CSS中創建簡單的過渡效果可以從以下幾個步驟來實現： 第一，在默認樣式中聲明元素的初始狀態樣式； 第二，聲明過渡元素最終狀態樣式，比如懸浮狀態； 第三，在默認樣式中通過添加過渡函數，添加一些不同的樣式。

CSS3的過渡transition屬性是一個復合屬性，主要包括以下幾個子屬性：

• transition-property:指定過渡或動態模擬的CSS屬性
• transition-duration:指定完成過渡所需的時間
• transition-timing-function:指定過渡函數
• transition-delay:指定開始出現的延遲時間

?

1) transition-property屬性

transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一個中點值的屬性（需要產生動畫的屬性）才能具備過渡效果，其對應具有過渡的CSS屬性主要有：

當"transition-property"屬性設置為all時，表示的是所有中點值的屬性。

2) 過渡所需時間 transition-duration

transition-duration屬性主要用來設置一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續時間。

3)過渡函數 transition-timing-function

transition-timing-function屬性指的是過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：
1.linear 恒速
2.ease 由快變慢，逐漸變慢
3.ease-in 速度越來越快，漸顯效果
4.easr-out 速度越來越慢，漸隱效果
5.ease-in-out 先加速再減速，漸顯漸隱

4)過渡延遲時間 transition-delay

transition-delay屬性和transition-duration屬性極其類似，不同的是transition-duration是用來設置過渡動畫的持續時間，
而transition-delay主要用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值后多長時間開始執行。

如果想改變兩個或者多個css屬性的transition效果時，只要把幾個transition的聲明串在一起，用逗號（“，”）隔開，
然后各自可以有各自不同的延續時間和其時間的速率變換方式。但需要注意的一點：第一個時間的值為 transition-duration，第二個為transition-delay。
例如：a{?transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

?Keyframes介紹

Keyframes被稱為關鍵幀，其類似于Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，

后面緊跟著是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規則。

@keyframes changecolor{0%{background: red;}100%{background: green;} }

注意：

1、在一個“@keyframes”中的樣式規則可以由多個百分比構成的，如在“0%”到“100%”之間創建更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達到一種在不斷變化的效果。

2、在@keyframes中定義動畫名稱時，其中0%和100%還可以使用關鍵詞from和to來代表，其中0%對應的是from，100%對應的是to。

3、Chrome?和?Safari?需要前綴?-webkit-；Foxfire?需要前綴?-moz-。

調用動畫

animation-name屬性主要是用來調用?@keyframes?定義好的動畫。

需要注意: animation-name 調用的動畫名需要和“@keyframes”定義的動畫名稱完全一致（區分大小寫），如果不一致將不具有任何動畫效果。

語法：

animation-name: none | IDENT[,none|DENT]*;

1、IDENT是由?@keyframes?創建的動畫名

2、none為默認值，當值為 none 時，將沒有任何動畫效果,這可以用于覆蓋任何動畫。

3、需要在 Chrome 和 Safari 上面的基礎上加上-webkit-前綴，Firefox加上-moz-

設置動畫播放時間

animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒

語法：

animation-duration: <time>[,<time>]*

取值<time>為數值，單位為秒，其默認值為“0”，這意味著動畫周期為“0”，也就是沒有動畫效果（如果值為負值會被視為“0”）。

設置動畫播放方式

animation-timing-function屬性主要用來設置動畫播放方式。主要讓元素根據時間的推進來改變屬性值的變換速率，簡單點說就是動畫的播放方式。

語法：

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
[, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

它和transition中的transition-timing-function一樣，具有以下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier(自定義貝塞爾曲線)。

設置動畫開始播放的時間

animation-delay屬性用來定義動畫開始播放的時間，用來觸發動畫播放的時間點。和transition-delay屬性一樣，用于定義在瀏覽器開始執行動畫之前等待的時間

語法： animation-delay:<time>[,<time>]*

設置動畫播放次數

animation-iteration-count屬性主要用來定義動畫的播放次數。

語法：

animation-iteration-count: infinite | <number> [, infinite | <number>]*

1、其值通常為整數，但也可以使用帶有小數的數字，其默認值為1，這意味著動畫將從開始到結束只播放一次。

2、如果取值為infinite，動畫將會無限次的播放。

3、Chrome或Safari瀏覽器，需要加入-webkit-前綴

設置動畫播放方向

animation-direction屬性主要用來設置動畫播放方向

語法：

animation-direction:normal | alternate [, normal | alternate]*

其主要有兩個值：normal、alternate

1、normal是默認值，如果設置為normal時，動畫的每次循環都是向前播放；

2、另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

3、Chrome或Safari瀏覽器，需要加入-webkit-前綴

設置動畫的播放狀態

animation-play-state屬性主要用來控制元素動畫的播放狀態。

參數：其主要有兩個值：running和paused。

其中running是其默認值，主要作用就是類似于音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放，這里的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。

例如，頁面加載時，動畫不播放。代碼如下：

animation-play-state:paused;

設置動畫時間外屬性

animation-fill-mode屬性定義在動畫開始之前和結束之后發生的操作。主要具有四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果如下：

? ? 關于backwards和none的區別：
backwards會在動畫開始前顯示動畫的第一幀，例如當動畫是在頁面加載完成后5秒開始，動畫是由紅色漸變為綠色，而div本來的背景色是黑色。那么設置backwards屬性會使得在動畫尚未開始的前五秒div顯示為紅色，而設置none的話，前五秒會div會顯示自己的背景色黑色。

?

?

?

? ? ? ?在默認情況之下，動畫不會影響它的關鍵幀之外的屬性，使用animation-fill-mode屬性可以修改動畫的默認行為。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始，或者在動畫結束時停在最后一個關鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。

例如：讓動畫停在最一幀處。代碼如下：

animation-fill-mode:forwards;

?

轉載于:https://www.cnblogs.com/Lovebugs/p/6393810.html

總結

以上是生活随笔為你收集整理的CSS3知识点整理（三）----变形与动画的全部內容，希望文章能夠幫你解決所遇到的問題。

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