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