圍繞某個點旋轉(zhuǎn)是CSS中的一種常見動畫效果,可以輕松實現(xiàn)。下面是如何使用CSS圍繞某個點旋轉(zhuǎn)的示例:
/* 選擇要旋轉(zhuǎn)的元素 */ .box { width: 100px; height: 100px; background-color: red; /* 設(shè)置原點 */ transform-origin: center center; /* 開始旋轉(zhuǎn) */ animation: rotation 2s linear infinite; } /* 定義動畫 */ @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
上述代碼中,我們定義了一個名為“box”的元素,并設(shè)置其寬度、高度,背景顏色。接著,使用CSS中的transform-origin
屬性來設(shè)置元素的旋轉(zhuǎn)原點,這里設(shè)置為中心點center center
。最后,使用animation
屬性來定義元素的動畫效果,包括名稱rotation
、總時間2s
、運動類型linear
、無限次循環(huán)infinite
等。
同時,我們還定義了一個@keyframes
塊,表示動畫過程中旋轉(zhuǎn)的角度變化。由于我們要圍繞中心點旋轉(zhuǎn),因此初始角度為0deg
,結(jié)束角度為360deg
。
通過以上代碼的設(shè)置,我們就可以實現(xiàn)一個簡單的圍繞中心點的旋轉(zhuǎn)效果。當(dāng)然,實際中也可以通過改變transform-origin
屬性的值來實現(xiàn)不同的旋轉(zhuǎn)方向和原點。