CSS3變形--旋轉 rotate()
旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間內進行操作,設置一個角度值,用來指定旋轉的幅度。如果這個值爲正值,元素相對原點中心順時針旋轉;如果這個值爲負值,元素相對原點中心逆時針旋轉。如下圖所示:
HTML代碼:
<div class="wrapper"> <div></div> </div>
CSS代碼:
.wrapper { width: 200px; height: 200px; border: 1px dotted red; margin: 100px auto; } .wrapper div { width: 200px; height: 200px; background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
CSS3中的變形--扭曲 skew()
扭曲skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞着X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同,rotate()函數只是旋轉,而不會改變元素的形狀。skew()函數不會旋轉,而只會改變元素的形狀。
Skew()具有三種情況:
1、skew(x,y)使元素在水平和垂直方向同時扭曲(X軸和Y軸同時按一定的角度值進行扭曲變形);
第一個參數對應X軸,第二個參數對應Y軸。如果第二個參數未提供,則值爲0,也就是Y軸方向上無斜切。
2、skewX(x)僅使元素在水平方向扭曲變形(X軸扭曲變形);
3、skewY(y)僅使元素在垂直方向扭曲變形(Y軸扭曲變形)
CSS3中的變形--縮放 scale()
縮放 scale()函數 讓元素根據中心原點對對象進行縮放。
縮放 scale 具有三種情況:
1、 scale(X,Y)使元素水平方向和垂直方向同時縮放(也就是X軸和Y軸同時縮放)
2、scaleX(x)元素僅水平方向縮放(X軸縮放)
3、scaleY(y)元素僅垂直方向縮放(Y軸縮放)
CSS3中的變形--位移 translate()
translate()函數可以將元素向指定的方向移動,類似於position中的relative。或以簡單的理解爲,使用translate()函數,可以把元素從原來的位置移動,而不影響在X、Y軸上的任何Web組件。
translate我們分爲三種情況:
transform: translate(50px,100px);
1、translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動)
2、translateX(x)僅水平方向移動(X軸移動)
3、translateY(Y)僅垂直方向移動(Y軸移動)
CSS3中的變形--矩陣 matrix()
matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣,用來指定一個2D變換,相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向(X軸)和垂直方向(Y軸)重新定位元素
transform: matrix(1,0,0,1,50,50);
CSS3中的變形--原點 transform-origin
任何一個元素都有一個中心點,默認情況之下,其中心點是居於元素X軸和Y軸的50%處。如下圖所示:
在沒有重置transform-origin改變元素原點位置的情況下,CSS變形進行的旋轉、位移、縮放,扭曲等操作都是以元素自己中心位置進行變形。但很多時候,我們可以通過transform-origin來對元素進行原點位置改變,使元素原點不在元素的中心位置,以達到需要的原點位置。
transform-origin取值和元素設置背景中的background-position取值類似,如下表所示:
transform-origin: left top;
CSS3中的動畫--過渡屬性 transition-property
早期在Web中要實現動畫效果,都是依賴於JavaScript或Flash來完成。但在CSS3中新增加了一個新的模塊transition,它可以通過一些簡單的CSS事件來觸發元素的外觀變化,讓效果顯得更加細膩。簡單點說,就是通過鼠標的單擊、獲得焦點,被點擊或對元素任何改變中觸發,並平滑地以動畫效果改變CSS的屬性值
在CSS中創建簡單的過渡效果可以從以下幾個步驟來實現: 第一,在默認樣式中聲明元素的初始狀態樣式; 第二,聲明過渡元素最終狀態樣式,比如懸浮狀態; 第三,在默認樣式中通過添加過渡函數,添加一些不同的樣式。
CSS3的過度transition屬性是一個複合屬性,主要包括以下幾個子屬性:
-
transition-property:指定過渡或動態模擬的CSS屬性
-
transition-duration:指定完成過渡所需的時間
-
transition-timing-function:指定過渡函數
-
transition-delay:指定開始出現的延遲時間
transition-property用來指定過渡動畫的CSS屬性名稱,而這個過渡屬性只有具備一個中點值的屬性(需要產生動畫的屬性)才能具備過渡效果,其對應具有過渡的CSS屬性主要有:
div { width: 200px; height: 200px; background-color:red; margin: 20px auto; -webkit-transition: background-color .5s ease .1s; transition: background-color .5s ease .1s; } div:hover { background-color: orange;
}
CSS3中的動畫--過渡所需時間 transition-duration
transition-duration屬性主要用來設置一個屬性過渡到另一個屬性所需的時間,也就是從舊屬性過渡到新屬性花費的時間長度,俗稱持續時間
div {
width: 300px;
height: 200px;
background-color: orange;
margin: 20px auto;
-webkit-transition-property: height;
transition-property: height; //過渡屬性
-webkit-transition-duration: 1s;
transition-duration: 1s; //過渡時間
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
div:hover {
height: 100px;
}
CSS3中的動畫--過渡函數 transition-timing-function
transition-timing-function屬性指的是過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度,以及過渡期間的操作進展情況,其中要包括以下幾種函數:
div {
width: 200px;
height: 200px;
background-color: orange;
margin: 20px auto;
border-radius: 100%;
-webkit-transition-property: -webkit-border-radius;
transition-property: border-radius;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
div:hover {
border-radius: 0px;
}
CSS3中的動畫--過渡延遲時間 transition-delay
transition-delay屬性和transition-duration屬性極其類似,不同的是transition-duration是用來設置過渡動畫的持續時間,而transition-delay主要用來指定一個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行。
有時我們想改變兩個或者多個css屬性的transition效果時,只要把幾個transition的聲明串在一起,用逗號(“,”)隔開,然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點:第一個時間的值爲 transition-duration,第二個爲transition-delay。
例如:a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
.wrapper div {
width: 200px;
height: 200px;
background-color: orange;
-webkit-transition: all .28s ease-in .1s;
transition: all .28s ease-in .1s;
}
.wrapper div:hover {
width: 300px;
height: 300px;
background-color: red;
}