css3變形及動畫的小知識點

1.變形-旋轉rotate()

<
div 
class
>
<
div><
span
>我不想旋轉
span
>
div>
div>

}2.變形-扭曲skew()

扭曲skew()函式能夠讓元素傾斜顯示。它可以將乙個物件以其中心位置圍繞著x軸和y軸按照一定的角度傾斜。這與rotate()函式的旋轉不同，rotate()函式只是旋轉，而不會改變元素的形狀。skew()函式不會旋轉，而只會改變元素的形狀。

div

3.變形-縮放scale()

縮放 scale()函式讓元素根據中心原點對物件進行縮放。

縮放 scale 具有三種情況：

i、 scale(x,y)使元素水平方向和垂直方向同時縮放（也就是x軸和y軸同時縮放）注意：y是乙個可選引數，如果沒有設定y值，則表示x，y兩個方向的縮放倍數是一樣的。例如：

div:hover

ii、scalex(x)元素僅水平方向縮放（x軸縮放）

div:hover

iii、scaley(y)元素僅垂直方向縮放（y軸縮放）

4、變形-位移 translate()

translate()函式可以將元素向指定的方向移動，類似於position中的relative。或以簡單的理解為，使用translate()函式，可以把元素從原來的位置移動，而不影響在x、y軸上的任何web元件。

<
div 
class
>
我不知道我的寬度和高是多少，我要實現水平垂直居中    
div>

padding: 20px;

background:orange;

color:#fff;

position:absolute;

top:50%;

left:50%;

border-radius: 5px;

-webkit-transform:translate(-50%,-50%);

-moz-transform:translate(-50%,-50%);

transform:translate(-50%,-50%);

}5.定位圓點 transform-origin　

在沒有重置transform-origin改變元素原點位置的情況下，css變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。transform-origin取值和元素設定背景中的background-position取值類似:

示例展示：

通過transform-origin改變元素原點到左上角，然後進行順時旋轉45度。

<
div 
class
>
<
div>圓點定位在左上角
div>
div>

}6.動畫transition

div

div:hover

7.動畫 animation 與

關鍵幀 keyframes 的使用：

.box

//規定動畫各個階段的狀態和動畫名字

@-webkit-keyframes animate_box

50%100%

}

還有另外一種效果，steps( )的用法

}

@-webkit-keyframes animate_box
50%100%
}

8.動畫 animation 與transiton的區別是：i、transiton 單純的**不會觸發任何過渡操作，需要通過使用者的行為（如點選，懸浮等）觸發，沒法再網頁載入時自動發生，他可觸發的方式有： :hoever :focus :checked **查詢觸發 ,js觸發

transition的發生是一次性的，不能重**生，除非再次觸發。只能定義開始和結束狀態，不能定義中間狀態。一條transition規則只能定義乙個屬性的變化，不能涉及多個屬性。

而 animation 可以在沒有觸發事件的情況下隨時間變化改變屬性，而且還可以重複，可以定義很多狀態，從而達到動畫效果。

9、讓動畫最終的狀態停止在自定義的狀態而非原始狀態的方法：

//把屬性分開寫是這樣

-webkit-animation-fill-mode: forwards;

-webkit-animation: 1s animate_box ease forwards

;

//把屬性合起來寫是這樣

<
div><
span
>
span
>
div>

}div span:hover

css3變形及動畫的小知識點

css3基礎知識點 animation動畫

CSS3 知識點總結

CSS3常用知識點

css3變形及動畫的小知識點

css3基礎知識點 animation動畫

CSS3 知識點總結

CSS3常用知識點

相關推薦