CSS弧線中心旋轉是一種常見的網頁設計效果,它可以讓我們實現一些炫酷的圓角效果和動畫。實現這種效果最重要的技術是transform-origin
和transform
兩個屬性。
transform-origin
是用來指定旋轉中心的屬性。默認情況下,旋轉中心是元素的中心點。但是,我們可以通過設置transform-origin
屬性來改變旋轉中心的位置。可以使用關鍵字或者具體數值來指定旋轉中心,如下:
transform-origin: center center; /*關鍵字*/ transform-origin: 50% 50%; /*百分比*/ transform-origin: 0px 0px; /*具體數值*/
transform
屬性是用來實現旋轉的。旋轉角度可以使用度數(deg)或弧度(rad)來表示,如下:
transform: rotate(45deg); /*度數*/ transform: rotate(0.5rad); /*弧度*/
為了實現弧線中心旋轉,我們可以先將元素設置成圓角形狀。然后,通過設置transform-origin
和transform
屬性來旋轉元素。
div{ width: 100px; height: 100px; border-radius: 50%; background-color: #f00; transform: rotate(45deg); transform-origin: center center; }
上述代碼可以讓一個帶有圓角的紅色正方形在中心點處旋轉45度,實現弧線中心旋轉的效果。
上一篇css設置成數字是
下一篇css引入樣式圖標跨域