CSS3新特性-變形
CSS3中對一個元素的變形通過 transform 及其一系列函式來實現。
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
語法: transform: none|transform-functions;
旋轉rotate()
旋轉rotate()函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作,設定一個角度值,用來指定旋轉的幅度。如果這個值為正值,元素相對原點中心順時針旋轉;如果這個值為負值,元素相對原點中心逆時針旋轉。
<div class="box"> <div><p>這是個測試!</p></div> </div> <style> .box div{ width: 70px; height: 45px; background-color: bisque; transform: rotate(60deg); } </style>
扭曲skew()
扭曲skew()函式能夠讓元素傾斜顯示。它可以將一個物件以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函式的旋轉不同,rotate()函式只是旋轉,而不會改變元素的形狀。skew()函式不會旋轉,而只會改變元素的形狀。 Skew()具有三種情況:
- skew(x,y)使元素在水平和垂直方向同時扭曲(X軸和Y軸同時按一定的角度值進行扭曲變形);第一個引數對應X軸,第二個引數對應Y軸。如果第二個引數未提供,則值為0,也就是Y軸方向上無斜切。
- skewX(x)僅使元素在水平方向扭曲變形(X軸扭曲變形)
- skewY(y)僅使元素在垂直方向扭曲變形(Y軸扭曲變形)
縮放scale()
縮放 scale()函式 讓元素根據中心原點對物件進行縮放。 縮放 scale 具有三種情況:
- scale(X,Y)使元素水平方向和垂直方向同時縮放(也就是X軸和Y軸同時縮放)
- 注意:Y是一個可選引數,如果沒有設定Y值,則表示X,Y兩個方向的縮放倍數是一樣的。
- scaleX(x)元素僅水平方向縮放(X軸縮放)
- scaleY(y)元素僅垂直方向縮放(Y軸縮放)
<div class="box"> <div><p>這是個測試!</p></div> </div> <style> .box div{ width: 70px; height: 45px; background-color: bisque; transform: scale(2,5.0); } </style>
位移translate()
translate()函式可以將元素向指定的方向移動,類似於position中的relative。或以簡單的理解為,使用translate()函式,可以把元素從原來的位置移動,而不影響在X、Y軸上的任何Web元件。 translate我們分為三種情況:
- translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動)
- translateX(x)僅水平方向移動(X軸移動)
- translateY(Y)僅垂直方向移動(Y軸移動)
<div class="box">
<div><p>這是個測試!</p></div>
<p>你會阻礙我嗎?</p>
</div>
<style>
.box div{
width: 70px;
height: 45px;
background-color: bisque;
opacity: 0.5;
transform: translate(100px,50px);
}
</style>
事實證明,設定了translate屬性的元素已經脫離文件流了,像發生了浮動一樣。
矩陣matrix()
matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣,用來指定一個2D變換,相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向(X軸)和垂直方向(Y軸)重新定位元素。
原點transform-origin
任何一個元素都有一箇中心點,預設情況之下,其中心點是居於元素X軸和Y軸的50%處。在沒有重置transform-origin改變元素原點位置的情況下,CSS變形進行的旋轉、位移、縮放,扭曲等操作都是以元素自己中心位置進行變形。但很多時候,我們可以通過transform-origin來對元素進行原點位置改變,使元素原點不在元素的中心位置,以達到需要的原點位置。transform-origin取值和元素設定背景中的background-position取值類似
<div class="wrapper">
<div>原點的預設位置</div>
</div>
<div class="wrapper topleft">
<div>原點重置左上角</div>
</div>
<style>
.wrapper {
width: 150px;
height: 150px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 150px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.topleft div{
transform-origin: left top;
}
</style>
過渡屬性 transition
通過滑鼠的單擊、獲得焦點,被點選或對元素任何改變中觸發,並平滑地以動畫效果改變CSS的屬性值。 在CSS中建立簡單的過渡效果可以從以下幾個步驟來實現:
- 在預設樣式中宣告元素的初始狀態樣式;
- 宣告過渡元素最終狀態樣式,比如懸浮狀態;
- 在預設樣式中通過新增過渡函式,新增一些不同的樣式。
過度transition屬性是一個複合屬性,主要包括以下幾個子屬性:
- transition-property:指定過渡或動態模擬的CSS屬性
- transition-duration:指定完成過渡所需的時間
- transition-timing-function:指定過渡函式
- transition-delay:指定開始出現的延遲時間
<div></div>
<style>
div {
width: 200px;
height: 200px;
background-color:red;
transition: background-color 0.5s ease 0.1s;
}
div:hover {
background-color: orange;
}
</style>
transition-property屬性
transition-property用來指定過渡動畫的CSS屬性名稱,而這個過渡屬性只有具備一箇中點值的屬性(需要產生動畫的屬性)才能具備過渡效果,其對應具有過渡的CSS屬性主要有:
background-color background-position | border-bottom-color border-bottom-width border-left-color border-left-width border-right-color border-right-width border-top-color border-top-width | margin-bottom margin-top margin-left margin-right | padding-bottom padding-top padding-left padding-right |
border-spacing letter-spacing word-spacing |
bottom left right |
line-height max-height max-width min-height min-width | outline-color outline-width |
text-indent text-shadow | width height | font-size font-weight | clip |
color opacity | vertical-align | visibility | z-index |
當“transition-property”屬性設定為all時,表示的是所有中點值的屬性。
過渡所需時間 transition-duration
transition-duration屬性主要用來設定一個屬性過渡到另一個屬性所需的時間,也就是從舊屬性過渡到新屬性花費的時間長度,俗稱持續時間。
過渡函式 transition-timing-function
transition-timing-function屬性指的是過渡的“緩動函式”。主要用來指定瀏覽器的過渡速度,以及過渡期間的操作進展情況,其中要包括以下幾種函式:
過渡延遲時間 transition-delay
transition-delay屬性和transition-duration屬性極其類似,不同的是transition-duration是用來設定過渡動畫的持續時間,而transition-delay主要用來指定一個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行。
有時我們想改變兩個或者多個css屬性的transition效果時,只要把幾個transition的宣告串在一起,用逗號(“,”)隔開,然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點:第一個時間的值為 transition-duration,第二個為transition-delay。
<div></div>
<style>
div {
width: 200px;
height: 200px;
background: red;
transition-property: border-radius;
transition-duration: .5s;
transition-timing-function: ease-in-out;
transition-delay: .2s;
}
div:hover {
border-radius: 100%;
}
</style>