一、過渡屬性transition
transition一般是設定動畫效果延續時間（過渡時間）
css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠劃過、單擊、獲得焦點或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值。過渡屬性需要觸發事件，如：hover（滑鼠劃過事件）
1.transition-property：檢索或設定物件中的參與過渡的屬性
說明：屬性值可以單獨設定否個屬性，也可以設定多個屬性 width，height； 還可以設定為all（預設值）代表所有屬性
2. transition-duration：檢索或設定物件過渡的持續時間
說明：設定過度時間（s, ms） 1s = 1000ms
3.transition-delay：檢索或設定物件延遲過渡的時間
說明：設定延遲過度時間（s, ms） 屬性值為正值的時候是延遲執行過渡效果，為負值的時候是提前只想過渡效果；
4. transition-timing-function：檢索或設定物件中過渡的動畫型別
說明：linear 勻速
ease（預設值） 逐漸慢下來
ease-in 加速
ease-out 減速
ease-in-out 先加速後減速
5、複合式寫法：transition:all 2s 1s linear ;
transition: 2s linear 1s all ;
說明：當使用複合式寫法的時候，過度時間（動畫效果時間）和延遲時間的順序是不能互換的，第乙個值代表過度時間，第二個值代表延遲時間；
二、2d transform
transform翻譯成漢語具有"變換"或者"改變"的意思。通過此屬性具有非常強大的功能，比如可以實現元素的位移、拉伸或者旋轉等效果最能體現transform 屬性強大實力的是實現元素的3d變換效果。
2d效果主要是分為rotate（旋轉）、scale（縮放）、skew（傾斜）、tranlation（位移）
2d功能函式：
1、2d位移 translate()
可以使用位移屬性，製作多幀**
說明：translate(tx) 當引數設定乙個值的時候，代表水平方向的位移；
translate(tx，ty) 第乙個值代表水平方向的距離，
第二個值代表垂直方向的距離；
translate(tx，ty, tz) 第乙個值代表水平方向的距離，第二個值 垂直方向的距離.第三個值 沿z軸移動（3d）
translatex(tx) 指定方向設定位移 沿x軸移動
translatey(ty) 指定方向設定位移 沿y軸移動
translatez(tz) 指定方向設定位移 沿z軸移動 ( 3d)
當屬性值為正值時 代表的是向右或者向下移動，當為負值的時候 代表 向左或向上移動
說明：屬性值可以用px，也可以用%（百分比大小的參照物是元素的寬高）
說明：translate（）位移的效果和定位裡的relative的效果是類似的，都是在當前位置進行位移的，對其元素的布局是沒有影響的，原來的位置的保留的。
2、2d縮放scale()
說明： 屬性值代表的是倍數，是不用加單位； 0——1 之間是 縮小的效果， 大於1的時候都是放大效果； 預設值是1；
0表示縮到0，1表示放大到原圖大小。主要應用於閃爍的小球
scale( 值1 ) 代表水平和垂直都放大或者縮小
scale( 值1，值2 ) 值1： 水平方向的縮放大小
值2 ：垂直方向
屬性值可以設定為負值，但是很少用；
scalex（值） 水平方向的縮放比例
scaley（值） 垂直方向的縮放比例
scalez（值） z軸方向的縮放比例 （3d）
3、2d旋轉rotate()
說明: 屬性值的單位是度（deg）
rotate() 沿著中心點旋轉；
只能放乙個屬性值 ，
正值：順時針旋轉；
負值： 逆時針旋轉；
rotatex() 沿x軸旋轉
rotatey() 沿y軸旋轉
rotatez() 沿z軸旋轉 （3d）
4、2d傾斜 skew()
可以應用於斜體導航欄
說明：屬性值的單位是度（deg） ；屬性值為正值：向左 或向上傾斜 負值：向右或向下傾斜
skew( 值1 ) 乙個值的時候 代表 沿x軸傾斜
skew( 值1，值2) 值1： 沿x軸的傾斜 值2 ：沿y軸的傾斜
skewx（） 沿x軸的傾斜
skewy（） 沿y軸的傾斜
說明：元素通過 transform進行變形時，都是對其他元素的布局不產生影響的。不脫離文件流。
變形時元素預設情況下都是沿著元素的中心點去變形的
當使用複合式寫法的時候，他們
順序不同，會導致結果不一樣，他們執行的順訊是從後向前解析的。
transform: translate(100px) rotate(60deg);
5、原點設定屬性：transform-origin
可以應用於摺扇效果製作，tranform-origin：center bottom；定義旋轉中心在水平靠下。
定義：transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉，該屬性只有在設定了transform屬性的時候起作用；
說明：transform-origin：值1 值2 ； 值1： 水平 值2： 垂直
px % left top right bottom ;
背景隱藏：
backface-visibility：visible；可見（預設值）
backface-visibility：hidden；隱藏
css3 漸變（gradient）：
css3 漸變（gradient）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 以前，你必須使用影象來實現這些效果，現在通過使用 css3 的漸變（gradients）即可實現。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
線性漸變：
語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
線性漸變：
background：linear-gradient（red 0%，red 20%，green 20%, green 40% ）這樣的漸變是一條一條展示的，幾乎沒有漸變色，都是純色
映象漸變
background：radial-gradient（red 0%，red 20%，green 20%, green 40% ）這樣的漸變是一圈一圈展示的，幾乎沒有漸變色，都是純色
重複性漸變：
div
說明：每個屬性之間都用逗號隔開。
direction：預設為to bottom，即從上向下的漸變；
度數：10deg（自上向右0度-90度，舊版本瀏覽器相反自右而上0-90度），左下：to left bottom，右下：to right bottom
stop：顏色的分布位置，預設均勻分布，例如有3個顏色，各個顏色的stop均為33.33%。
background: linear-gradient(to bottom,red 30% green 60%);
注：自上而下30%的紅+紅綠漸變+60%的綠
今天分享一些2d、漸變和過度的屬性，不僅可以加深自己的記憶，同時也能幫助大家了解css和html中的一些屬性，共同學習，一起進步。
css旋轉45度 css 漸變過渡2D
一 過渡屬性 transition css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠劃過 單擊 獲得焦點或對元素任何改變中觸發，並圓滑地以動畫效果改變css的屬性值 過渡屬性需要觸發事件，如 hover 滑鼠劃過事件 1.transition prop...
CSS3漸變 過渡 2d變換
寫法 一 background gradient linear,起點 水平 垂直 終點，color stop 開始漸變的位置，顏色 注 color stop 開始漸變的位置，顏色 後面可以連著寫多個值。寫法 二 background webkit linear gradient 方向 角度 deg ...
css3 背景 漸變 過渡 2D變換
背景大小 水平 垂直 原點 起始點 background origin border box 以邊框為起始點 background origin content box 以內容為起始點 background origin padding box 以內邊距為起始點 背景裁剪 background cl...