CSS3實(shí)現(xiàn)以一個(gè)點(diǎn)旋轉(zhuǎn)的動(dòng)畫效果，可以通過設(shè)置transform屬性中的rotate函數(shù)來實(shí)現(xiàn)，下面是一個(gè)簡單的示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>CSS3旋轉(zhuǎn)動(dòng)畫示例</title>
<style>
.rotate-container {
perspective: 1000px;
width: 200px;
height: 200px;
position: relative;
margin: 50px auto;
}
.rotate-item {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: #333;
border-radius: 50%;
transform-origin: center; /* 設(shè)置旋轉(zhuǎn)中心為元素中心 */
transform: rotate(45deg); /* 旋轉(zhuǎn)45度 */
transition: transform 2s ease-in-out; /* 添加過渡效果 */
}
</style>
</head>
<body>
<div class="rotate-container">
<div class="rotate-item"></div>
</div>
</body>
</html>在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為rotate-container的容器，并設(shè)置了一個(gè)透視距離（perspective）為1000px，這將使旋轉(zhuǎn)效果更加逼真，容器內(nèi)部有一個(gè)名為rotate-item的元素，它將被旋轉(zhuǎn)，我們設(shè)置了元素的寬度和高度，并將其背景色設(shè)置為深灰色，我們將元素的transform-origin屬性設(shè)置為center，這將使旋轉(zhuǎn)中心位于元素的中心，我們通過transform屬性將元素旋轉(zhuǎn)45度，并通過transition屬性添加了一個(gè)過渡效果，使旋轉(zhuǎn)更加平滑。
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時(shí)請以鏈接形式注明文章出處。
