CSS實作圖片動態效果的相關屬性介紹

css實作圖片動態效果。

使用方法利用hover偽類別

操作流程首先決定要實現的效果設定初始表示狀態

#動畫用到的css屬性

transition 屬性

transition-property 規定設定過渡效果的CSS 屬性的名稱。

(

none 沒有屬性會獲得過渡效果。

all 所有屬性都會獲得過渡效果。

property 定義應用過渡效果的CSS 屬性名稱列表，列表以逗號分隔。

transition-timing-function 規定速度效果的速度曲線。

(

linear 規定以相同速度開始至結束的過渡效果(等於cubic-bezier(0,0,1,1))。

ease 規定慢速開始，然後變快，然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。 (0.42,0,1,1))。 ease-in-out 規定以慢速開始和結束的過渡效果(等於cubic-bezier(0.42,0,0.58,1))。 cubic-bezier

函數

中定義自己的值。 。

trans

for

m 屬性向元素套用 2D 或 3D 轉換。此屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

translateX(x) 定義轉換，只是用 X 軸的值。

translateY(y) 定義轉換，只是用 Y 軸的值。

scale(x,y) 定義 2D 縮放轉換。 scaleX(x) 透過設定 X 軸的值來定義縮放轉換。

scaleY(y) 透過設定 Y 軸的值來定義縮放轉換。

rotate3d(x,y,z,angle) 定義 3D 旋轉。

rotateX(angle) 定義沿著X 軸的3D 旋轉rotateY(angle) 定義沿著Y 軸的3D 旋轉

rotateZ(angle) 定義沿著Z軸的3D 旋轉

rotate(angle) 定義2D 旋轉，在參數中規定角度。設定transform-origin (旋轉中心點)

skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。

skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。

skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。

以上是CSS實作圖片動態效果的相關屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！