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