CSS3 漸變（gradient）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 以前，你必須使用圖像來實現這些效果，現在通過使用 CSS3 的漸變（gradients）即可實現。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。

1、線性漸變

語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);說明：direction：默認為to bottom，即從上向下的漸變；
stop：顏色的分布位置，默認均勻分布，例如有3個顏色，各個顏色的stop均為33.33%。

示例1：to left、top right、to bottom、to top

div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } /* 瀏覽器默認值 */
div { background:linear-gradient(to top, red , blue) }
分別產生“從右到左”、“從左到右”、“從上到下”、“從下到上”的“紅色–綠色”漸變

1.png

示例2：to right bottom、to right top、to left bottom、to left top

div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }

分別產生到“右下角”、“右上角”、“左下角”、“左上角”的漸變

2.png

示例3：使用角度漸變

div { background: linear-gradient(10deg, red, blue) }

3.png

2、徑向漸變

徑向漸變不同于線性漸變，線性漸變是從“一個方向”向“另一個方向”的顏色漸變，而徑向漸變是從“一個點”向四周的顏色漸變

語法：background: radial-gradient(center, shape, size, start-color, ..., last-color);說明：center：漸變起點的位置，可以為百分比，默認是圖形的正中心。
shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。
size：漸變的大小，即漸變到哪里停止，它有四個值。 closest-side：最近邊；
farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角

示例1：多顏色點均勻分布

div { background: radial-gradient(red, green, blue); }
以中心（50% 50%）為起點，到最遠角（farthest-corner），從red到green、blue的均勻漸變

4.png

EG:div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 或 div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

示例2：多顏色節點不均勻分布

div { background: radial-gradient(red 5%, green 15%, blue 60%); }

5.png

示例3：設置漸變形狀

div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }

6.png

circle：漸變為最大的圓形； ellipse：根據元素形狀漸變，元素為正方形是顯示效果與circle無異。

示例4：不同尺寸的漸變

size指定了漸變的大小，即漸變到哪里停止，它有四個值。
closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角

div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

7.png

3、重復漸變

（1）重復性線性漸變

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
說明：10%的位置為yellow，20%的位置為green，然后按照這20%向下重復

8.png

（2）重復性徑向漸變

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

9.png

CSS3 過渡

transition

css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值

transition-property：檢索或設置對象中的參與過渡的屬性
transition-duration：檢索或設置對象過渡的持續時間
transition-delay：檢索或設置對象延遲過渡的時間
transition-timing-function：檢索或設置對象中過渡的動畫類型

簡寫：
transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫類型

transition-timing-function：檢索或設置對象中過渡的動畫類型

10.png

貝塞爾曲線：
屬性值：cubic-bezier()貝塞爾曲線網址：http://cubic-bezier.com/

CSS3 2D

transform

transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey()

1、translate()

將元素向指定的方向移動，類似于position中的relative。
水平移動：向右移動translate(tx,0)和向左移動translate(-tx,0)；
垂直移動：向上移動translate(0,-ty)和向下移動translate(0,ty);
對角移動：右下角移動translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。

translateX()：水平方向移動一個對象。對像只向X軸進行移動，如果值為正值，對像向右移動；如果值為負值，對像向左移動。translateY()：縱軸方向移動一個對象。對象只向Y軸進行移動，如果值為正值，對象向下移動；如果值為負值，對像向上移動。
這兩個函數和前面介紹的translate()函數不同的是每個方法只接受一個值。
所以
transform:translate(-100px,0)實際上等于transform:translateX(-100px);
transform:translate(0,-100px)實際上等于transform:translateY(-100px)。

2、scale()

讓元素根據中心原點對對象進行縮放。默認的值1。因此0.01到0.99之間的任何值，使一個元素縮小；而任何大于或等于1.01的值，讓元素顯得更大。
縮放scale()函數和translate()函數的語法非常相似，他可以接受一個值，也可以同時接受兩個值，如果只有一個值時，其第二個值默認與第一個值相等。
例如，
scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。
scaleX()：相當于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認值是1。
scaleY()：相當于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認值是１。

3、rotate()

旋轉rotate()函數通過指定的角度參數對元素根據對象原點指定一個2D旋轉。它主要在二維空間內進行操作，接受一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。

rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉

rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉

4、skew()

傾斜skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。
一個參數時：表示水平方向的傾斜角度；
兩個參數時：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度

11.png

transform-origin

transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉，該屬性只有在設置了transform屬性的時候起作用；

因為我們元素默認基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew等操作都是以元素自己中心位置進行變化的。

2D 轉換元素能夠改變元素 x 和 y 軸