css3旋轉(zhuǎn)如何應(yīng)用?
CSS3已經(jīng)出現(xiàn)很多年了,而且應(yīng)用也極為廣泛。尤其是移動互聯(lián)網(wǎng)時代,越來越多的網(wǎng)站采用了CSS3進(jìn)行樣式編碼。CSS3有非常多的技術(shù)特性,比如旋轉(zhuǎn)、陰影、亮度、飽和度、圓角、等等。正好筆者在寫一個有關(guān)網(wǎng)頁元素旋轉(zhuǎn)的布局,那么,下面就討論一下CSS3旋轉(zhuǎn)角度。
先看代碼:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
上面的7deg的意思就是旋轉(zhuǎn)7度,非常簡單。
CSS3旋轉(zhuǎn)角度的代碼看上去很多,實(shí)際上核心部在于transform:rotate(7deg);。但是,為了適用于各類瀏覽器,筆者還是建議你不要怕麻煩把這些代碼都寫上吧,畢竟用戶體驗(yàn)第一。
為什么要用CSS3旋轉(zhuǎn)角度功能呢?上圖是筆者正在開發(fā)的一套酒店智能控制系統(tǒng),其中空調(diào)溫度控制功能中的儀表盤就用到了CSS3旋轉(zhuǎn)角度功能。通過觸摸儀表盤旋轉(zhuǎn)達(dá)到控制空調(diào)溫度的目的,而儀表盤的旋轉(zhuǎn)就必須要用到CSS3的旋轉(zhuǎn)角度功能。這樣,應(yīng)該是一目了然了。