CSS中實(shí)現(xiàn)元素繞中心點(diǎn)旋轉(zhuǎn),可以通過(guò)設(shè)置元素的CSS屬性來(lái)實(shí)現(xiàn),下面是一個(gè)簡(jiǎn)單的例子:
HTML代碼:
<div class="rotate-center">我是要旋轉(zhuǎn)的元素</div>
CSS代碼:
.rotate-center { position: relative; transform-origin: center; /* 設(shè)置旋轉(zhuǎn)中心為元素中心 */ transition: transform 2s; /* 設(shè)置旋轉(zhuǎn)動(dòng)畫(huà)為2秒 */ }
在這個(gè)例子中,我們給要旋轉(zhuǎn)的元素添加了一個(gè)類(lèi)名rotate-center
,然后在CSS中設(shè)置了這個(gè)類(lèi)的transform-origin
屬性為center
,表示旋轉(zhuǎn)的中心是元素的中心,我們還設(shè)置了一個(gè)transition
屬性,表示旋轉(zhuǎn)動(dòng)畫(huà)的時(shí)間為2秒。
當(dāng)你調(diào)用這個(gè)類(lèi)名時(shí),元素就會(huì)開(kāi)始繞中心旋轉(zhuǎn)了,你可以根據(jù)需要調(diào)整旋轉(zhuǎn)的角度和時(shí)間。