2D轉換及動畫

可以實現移動、旋轉、放縮效果的特徵

移動類似於定位，可以改變元素在頁面中的位置。

語法：

transform

:translate
(x,y)
;/*也可分開寫*/
transform
:translatex
(n);
transform
:translatey
(n);

旋轉是指讓元素在二維平面上順時針或逆時針旋轉

語法：

transform

:rotate
(度數)
;

設定元素轉換中心點

語法：

transform-origin

:x y;

控制元素放大還是縮小的屬性

語法：

transform

:scale
(x,y)
;transform
:scale
(1,1)
;/*寬和高都放大一倍，相當於沒有放大*/
transform
:scale
(3,5)
;/*寬放大三倍，高放大五倍*/
transform
:scale
(2);
/*只寫乙個引數表示第乙個引數和第二個引數一樣*/
transform
:scale
(0.5,0.5)
/*縮小*/

動畫製作的步驟：

定義動畫

呼叫（使用）動畫

@keyframes 動畫名稱

/*開始狀態*/
100%
/*結束狀態*/
}

div

動畫屬性簡寫：

2D轉換及動畫效果

今日框架 今日重點 一 2d轉換 2d 轉換是改變標籤在二維平面上的位置和形狀 1 translate 移動 1 語法 transform translate x,y 2 重點知識點 1 2d 的移動主要是指 水平 垂直方向上的移動 2 translate 最大的優點就是不影響其他元素的位置 3 t...

2D動畫效果transform

transform 2d轉換 1，移動 translate transform translate x,y translate x,y 定義 2d 轉換。translatex x 定義轉換，只是用 x 軸的值。translatey y 定義轉換，只是用 y 軸的值。transform transla...

2D轉換 3D轉換

轉換是使元素改變形狀 尺寸和位置的一種效果。能夠對元素進行移動 縮放 轉動 拉長或拉伸。2d轉換 瀏覽器相容 1 internet explorer 10 firefox 以及 opera 支援 transform 屬性。2 chrome 和 safari 需要字首 webkit 3 interne...