CSS可以非常靈活地控制各種元素的樣式,其中圍繞自身旋轉(zhuǎn)的效果可以通過CSS3的transform屬性來實現(xiàn)。例如:
.rotate { transform: rotate(45deg); }
在上面的代碼中,rotate類中的元素會沿著自身中心點旋轉(zhuǎn)45度。你可以通過修改角度值來實現(xiàn)不同的旋轉(zhuǎn)效果。
如果想要實現(xiàn)連續(xù)的旋轉(zhuǎn)效果,可以使用CSS3的animation屬性。例如:
.rotate { animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
在上面的代碼中,rotate類的元素將會以2秒的周期沿著自身中心點不斷地旋轉(zhuǎn),直到無窮。這是通過指定animation屬性中的spin動畫和其相關(guān)的keyframes來實現(xiàn)的。
最后,如果你希望控制旋轉(zhuǎn)的中心點,可以使用transform-origin屬性。例如:
.rotate { transform-origin: top left; }
在上面的代碼中,rotate類中的元素會以其左上角為中心點進(jìn)行旋轉(zhuǎn)。你可以通過修改transform-origin的值,來實現(xiàn)不同的中心點旋轉(zhuǎn)。
上一篇html5與php交互
下一篇html5如何鏈接php