第8章 CSS3中的變形與動畫（上）

變形--旋轉 rotate()

旋轉rotate()函數經過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間內進行操做，設置一個角度值，用來指定旋轉的幅度。若是這個值爲正值，元素相對原點中心順時針旋轉；若是這個值爲負值，元素相對原點中心逆時針旋轉。以下圖所示：

HTML代碼：

<div class="wrapper">
  <div></div>
</div>
複製代碼

CSS代碼：

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
複製代碼

演示結果

變形--扭曲 skew()

扭曲skew()函數可以讓元素傾斜顯示。它能夠將一個對象以其中心位置圍繞着X軸和Y軸按照必定的角度傾斜。這與rotate()函數的旋轉不一樣，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。 Skew()具備三種狀況： 一、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按必定的角度值進行扭曲變形）；

第一個參數對應X軸，第二個參數對應Y軸。若是第二個參數未提供，則值爲0，也就是Y軸方向上無斜切。 二、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

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

變形--縮放 scale()

縮放 scale()函數 讓元素根據中心原點對對象進行縮放。 縮放 scale 具備三種狀況： 一、 scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）

例如：

div:hover {
  -webkit-transform: scale(1.5,0.5);
  -moz-transform:scale(1.5,0.5)
  transform: scale(1.5,0.5);
}
複製代碼

注意：Y是一個可選參數，若是沒有設置Y值，則表示X，Y兩個方向的縮放倍數是同樣的。 二、scaleX(x)元素僅水平方向縮放（X軸縮放）

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

HTML代碼：

<div class="wrapper">
  <div>我將放大1.5倍</div>
</div>
CSS代碼：
.wrapper {
  width: 200px;
  height: 200px;
  border:2px dashed red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background: orange;
  text-align: center;
  color: #fff;
}
.wrapper div:hover {
  opacity: .5;
  -webkit-transform: scale(1.5);
  -moz-transform:scale(1.5)
  transform: scale(1.5);
}
複製代碼

變形--位移 translate()

translate()函數能夠將元素向指定的方向移動，相似於position中的relative。或以簡單的理解爲，使用translate()函數，能夠把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。 translate咱們分爲三種狀況： 一、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）

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

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

實例演示：經過translate()函數將元素向Y軸下方移動50px,X軸右方移動100px。 HTML代碼：

<div class="wrapper">
  <div>我向右向下移動</div>
</div>
複製代碼

CSS代碼：

.wrapper {
  width: 200px;
  height: 200px;
  border: 2px dotted red;
  margin: 20px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: orange;
  color: #fff;
  -webkit-transform: translate(50px,100px);
  -moz-transform:translate(50px,100px);
  transform: translate(50px,100px);
}
複製代碼

演示結果

變形--矩陣 matrix()

matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，至關於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）從新定位元素,此屬性值使用涉及到數學中的矩陣，我在這裏只是簡單的說一下CSS3中的transform有這麼一個屬性值，若是須要深刻了解，須要對數學矩陣有必定的知識。

變形--原點 transform-origin

任何一個元素都有一箇中心點，默認狀況之下，其中心點是居於元素X軸和Y軸的50%處。以下圖所示：

在沒有重置transform-origin改變元素原點位置的狀況下，CSS變形進行的旋轉、位移、縮放，扭曲等操做都是以元素本身中心位置進行變形。但不少時候，咱們能夠經過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到須要的原點位置。 transform-origin取值和元素設置背景中的background-position取值相似，以下表所示：

示例展現： 經過transform-origin改變元素原點到左上角，而後進行順時旋轉45度。 HTML代碼：

<div class="wrapper">
  <div>原點在默認位置處</div>
</div>
<div class="wrapper transform-origin">
  <div>原點重置到左上角</div>
</div>
複製代碼

CSS代碼：

.wrapper {
  width: 300px;
  height: 300px;
  float: left;
  margin: 100px;
  border: 2px dotted red;
  line-height: 300px;
  text-align: center;
}
.wrapper div {
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.transform-origin div {
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
複製代碼

演示結果：

動畫--過渡屬性 transition-property

早期在Web中要實現動畫效果，都是依賴於JavaScript或Flash來完成。但在CSS3中新增長了一個新的模塊transition，它能夠經過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是經過鼠標的單擊、得到焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。 在CSS中建立簡單的過渡效果能夠從如下幾個步驟來實現： 第一，在默認樣式中聲明元素的初始狀態樣式； 第二，聲明過渡元素最終狀態樣式，好比懸浮狀態； 第三，在默認樣式中經過添加過渡函數，添加一些不一樣的樣式。 CSS3的過分transition屬性是一個複合屬性，主要包括如下幾個子屬性： ● transition-property:指定過渡或動態模擬的CSS屬性 ● transition-duration:指定完成過渡所需的時間 ● transition-timing-function:指定過渡函數 ● transition-delay:指定開始出現的延遲時間 先來看transition-property屬性 transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具有一箇中點值的屬性（須要產生動畫的屬性）才能具有過渡效果，其對應具備過渡的CSS屬性主要有：

HTML:

<div></div>
複製代碼

CSS:

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}
複製代碼

演示結果: 鼠標移入

鼠標移出

特別注意：當「transition-property」屬性設置爲all時，表示的是全部中點值的屬性。 用一個簡單的例子來講明這個問題： 假設你的初始狀態設置了樣式「width」,「height」,「background」,當你在終始狀態都改變了這三個屬性，那麼all表明的就是「width」、「height」和「background」。若是你的終始狀態只改變了「width」和「height」時，那麼all表明的就是「width」和「height」。

動畫--過渡所需時間 transition-duration

transition-duration屬性主要用來設置一個屬性過渡到另外一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續時間。 動畫--過渡函數 transition-timing-function transition-timing-function屬性指的是過渡的「緩動函數」。主要用來指定瀏覽器的過渡速度，以及過渡期間的操做進展狀況，其中要包括如下幾種函數：

案例展現： 在hover狀態下，讓容器從一個正方形慢慢過渡到一個圓形，而整個過渡是先加速再減速，也就是運用ease-in-out函數。

動畫--過渡延遲時間 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;}