CSS3的過渡，動畫，圖形轉換

CSS3的學習小節

遲來的CSS3學習，在CSS3中，增長了許多的新特性，像過分動畫，圓角，媒體查詢...等等新的特性，能夠給咱們開發者平常使用。

過渡

過分動畫關鍵字【transition】 transition : css屬性 時間 方式 時間 詳細寫就是:

• transition-property 規定須要過渡的css屬性名稱
• transition-duration 規定過渡效果須要花費的時間
• transition-timing-function 規定過渡效果的時間曲線
• transiity-delay 規定過渡效果開始的時間

DEMO:當鼠標移入，寬度將從 100px => 300px之間的動做

# HTML
<section>my tranition Demo</section>
# CSS
<style>
        section{
            width: 100px;
            height: 100px;
            border-radius : 10px;
            background-color: cadetblue;
            transition : width 2s ease 0.2s;
        }
        section:hover{
            width: 300px;
        }
    </style>
複製代碼

各個transition的屬性值

/* transition-property */
transition-property : none|all|屬性列表(多個能夠用逗號分開)
/* transition-duration */
transition-duration : 時間（秒或者毫秒）
/* transition-timing-function */
transition-timing-function : 
/*
1.linear : 開始到結束都是一個速度(勻速運動)
2.ease : 從慢速開始，逐漸變快，而後慢速結束(拋物線運動)
3.ease-in : 以慢速開始的過渡
4.ease-out : 以慢速結束的過渡
5.ease-in-out : 慢速開始和結束的過渡
6.cubic-bezier : 在函數中自定義本身的值
*/
/* transition-delay */
transition-delay: 時間(執行過渡開始的時間)
複製代碼

動畫

要建立CSS動畫，你須要瞭解keyframes規則和animation屬性。 @keyframes須要規定變化發生的時間，可使用百分好比0%,50%,100%等等，也能夠用from和to表示0%和100%。0%是動畫的開始，100%是動畫的結束。 Demo

/* 建立@keyframes規則 from and to*/
 @keyframes anim{
 from {
  width: 150px;
  height: 150px;
  background-color: blue;
  }
  to {
    width: 400px;
    height: 400px;
    background-color: beige;
    } 
}
/* 百分比方式 */
@keyframes anim1{
  0% {
  width: 150px;
  }25% {
  width: 300px;
  }50% {
  width: 150px;
  }100% {
  width: 300px;
  }
}
複製代碼

animation屬性

animation的屬性列表

• animation-name : @keyframes的名稱值
• animation-duration : 動畫指定的完成時間
• animation-timing-function : 規定動畫的時間曲線
• animation-delay ： 設置動畫開始的時間
• animation-iteration-count : 動畫播放次數
• animation-direction ：是否反覆播放動畫
• animation-fill-mode : 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式
• animation-play-state : 動畫狀態，是否在運行

/* animation-name ps:上面已經定義了@keyframes*/
animation-name : anim;
/* animation-duration */
animation-duration : 5s;
/* 
animation-timing-function
具體能夠參考transition-timing-function
*/
animation-timing-function :  linear;
animation-timing-function :  ease;
animation-timing-function :  ease-in;
animation-timing-function : ease-out;
animation-timing-function : ease-in-out;
/* animation-delay--給定一個時間 */
animation-delay : 3s; 
/*animation-iteration-count : n(次數)|infinite(一直)*/
animation-iteration-count : 2 | infinite;
/* animation-direction */
animation-direction : normal /* 正常播放 */
animation-direction : reverse /* 反向播放 */
animation-direction : alternate /* 奇數正常播放，偶數反向播放 */
animation-direction : alternate-reverse /* 奇數反向播放，偶數正常播放 */
animation-direction : initial /* 默認值 */
animation-direction : inherit /* 父元素繼承 */
複製代碼

圖形的轉換

在學習transform的時候須要理解2D和3D的區別，2D的話說簡單點就是在一個象限之間的操做，或者是經過自己的X,Y軸進行，而3D是一個立體的，會在X,Y,Z軸中進行轉換，區別如同一個正方形和正方體通常。

2D轉換

經過transform字段和其2D方法進行操做，2D方法以下：

• translate()
• rotate()
• scale()
• skew()
• matrix()

/* tanslate(x,y) 根據設定的XY參數，從當前元素位置移動 */
# 向X位置移動100px,Y位置不動，也就像右移動了100px，Y軸同理
transform: translate(100px,0px);
-ms-transform: translate(100px,0px);
-webkit-transform:translate(100px,0px);

/* rotate() 給定一個參數，使元素順時針旋轉，若是負值將逆時針旋轉 */
# 順時針旋轉45度
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

/* scale() X，Y軸方法縮放多少倍 */
# X,Y軸放大兩倍
transform: scale(2,2);
-ms-transform: scale(2,2);
-webkit- transform: scale(2,2);

/* skew() 斜切 */
# skewX X軸傾斜
# skewY Y軸傾斜
transform: skew(30deg,30deg);
-ms-transform: skew(30deg,30deg); 
-webkit-transform: skew(30deg,30deg ); 
複製代碼

matrix() 矩陣對象

提及來可能會有一點抽象，該方法的初始值爲 matrix(1,0,0,1,0,0) 可能不是很是好理解，具體能夠去看一下別人總結的數學公式 Demo

# 矩陣
--    --
|1 2 3 |
|4 5 6 |
|7 8 9 |
--    --
複製代碼

transform-origin

tranform-ogigin容許你修改元素的X,Y,Z軸。相對於2D和3D來說。

/* transform-origin:X Y Z */
transform-origin: 300px 300px;/* 能夠是百分比，也能夠是位置單位 */
複製代碼

3D轉換

transform的3D轉換的一些經常使用方法和屬性以下

• rotateX()
• rotateY()
• transform-style
• perspective
• perspective-origin
• backface-visibility

/* rotateX() 圍繞X軸順時針轉動 */
# X軸順時針轉動100度
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg); 
/* rotateY() 圍繞Y軸順時針轉動 */
# Y軸順時針轉動100度
transform: rotateY(100deg);
-webkit-transform: rotateY(100deg); 
複製代碼

transform-style

transform-style屬性指定嵌套元素是怎樣在三維空間中呈現。

/* transform-style */
# flat ： 全部子元素都在2D平面呈現
# preserve-3d ： 表示全部子元素都在3D平面呈現
transform-style: flat;
transform-style: preserve-3d;
複製代碼

perspective

perspective表示3D元素的透視，定義的perspective屬性，它是一個元素的子元素，透視圖，而不是元素自己。

perspective: none;/* 不透視 */
perspective: 200px;/* 透視的區域 */
複製代碼

perspective-origin

perspective-origin屬性定義3d元素所基於的X,Y軸，該屬性容許你修改元素的底部位置，具備x-axis和y-axis參數

/* x-axis參數具備幾種可能 */
# left
# center
# right
# length
# %百分比
/* y-axis參數具備幾種可能 */
# left
# center
# right
# length
# %百分比
複製代碼

backface-visibility

backface-visibility屬性定義當元素不面向屏幕時是否可見，在旋轉元素不但願看到背面的時候使用效果很好。

/* backface-visibility */
backface-visibility: visible; /* 背面是可見的 */
backface-visibility: hidden; /* 背面是不可見的 */
複製代碼

總結

遲來的css3trans**系列學習，都是一些常識性的學習，主要是一些狀況下使用不至於特別懵逼。matrix() 矩陣對象確實是無從下筆，由於內容有點雜，涉及離散數學。想深刻學習能夠去看一些比較深刻的文章