一、過渡屬性 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 先加速后減速

貝塞爾曲線網址：cubic-bezier.com

復合式寫法：transition:all 2s 1s linear ;

transition: 2s linear 1s all ;

說明：當使用復合式寫法的時候，過度時間和延遲時間的順序是不能互換的，第一個值代表過度時間，第二個值代表延遲時間；

注：哪個元素發生變形，就把過渡屬性添加給誰； 建議寫給元素初始的效果里；

二、2D transform

transform翻譯成漢語具有"變換"或者"改變"的意思。通過此屬性具有非常強大的功能，比如可以實現元素的位移、拉伸或者旋轉等效果最能體現transform 屬性強大實力的是實現元素的3D變換效果。

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；

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

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

說明：transform-origin：值1 值2 ； 值1： 水平 值2： 垂直

px % left top right bottom ;

6、backface-visibility ：隱藏被旋轉的 div 元素的背面

backface-visibility:visible;可見 （默認值）

backface-visibility:hidden;不可見

backface-visibility 的bug : 如果元素翻轉后結束后顯示在上一層，給他加一個背景色就可以解決了。

三、css3 漸變

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

線性漸變：

語法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

說明：

direction：默認為to bottom，即從上向下的漸變；

還可以設置為度數。自上向右 （0度 —— 90度的變化） -- 舊的標準是相反 自右而上 （ 90—— 0）

stop：顏色的分布位置，默認均勻分布，例如有3個顏色，各個顏色的stop均為33.33%。

徑向漸變：

語法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

position：漸變起點的位置，可以為百分比，默認是圖形的正中心。

shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。

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

總結

以上是生活随笔為你收集整理的css旋转45度_css 渐变过渡2D的全部內容，希望文章能夠幫你解決所遇到的問題。

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