CSS3中rotate的作用
生活随笔
收集整理的這篇文章主要介紹了
CSS3中rotate的作用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一。CSS3中的transform（旋轉）允許您翻轉，旋轉，縮放和傾斜元素。
transform(旋轉)是一種讓元素更改形狀，大小和位置的效果。
CSS3支持2D和3D轉換。
例子：
<html> <head><style>#first {background-color: yellow;width: 200px;height: 200px;margin: 100px;transform: rotate(0deg);transition: transform 1s ease;}#first:hover {transform: rotate(500deg); //rotate()方法里的deg數值越大，旋轉的越久。}</style> </head> <body><div id="first">w3cschool</div> </body> </html>transition可以有以下值：
ease-動畫開始緩慢，然后加速（此為default默認值）
ease-in:緩步開始，然后加速，突然停止。
ease-out：快速啟動，但減速停止。
ease-in-out:類似與緩沖，但更加微妙的加速和減速。
linear：勻速轉換。
順便說一下貝塞爾曲線，英文全稱為（cubiz-bezier），cubiz-bezier（）函數，它允許你在cubiz-bezier函數中定義你自己的值，值從0到1.
代碼格式如下：
transition-timing-fucntion:cbiz-bezier(0,0,1,1);
因為這個函數較為復雜，本人又比較菜，所以有興趣的同學可以去百度一下。
二。CSS3中的transform:rotate（），當rotate()中的值為正值時，順時針旋轉。
當rotate()中的值為負值時，逆時針旋轉。
例子如下：
總結
以上是生活随笔為你收集整理的CSS3中rotate的作用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为手机 标题栏 Notificatio
- 下一篇： H5+CSS3