CSS3齒輪旋轉(zhuǎn)是一種很酷炫的效果，可以用于網(wǎng)站的裝飾、動(dòng)畫等部分。下面我們先看一下CSS3齒輪旋轉(zhuǎn)的代碼實(shí)現(xiàn)。

.gear {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid #ccc;
}
.gear:before,
.gear:after {
position: absolute;
content: "";
top: 10px;
left: -25px;
width: 50px;
height: 80px;
background: #ccc;
border-radius: 4px;
transform-origin: 50% 100%;
animation: gear-rotate 2s linear infinite;
}
.gear:after {
top: 10px;
left: 75px;
}
@keyframes gear-rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

通過以上代碼，我們可以看到，首先使用border-radius屬性來創(chuàng)建一個(gè)圓形的齒輪，然后使用:before和:after偽元素來創(chuàng)建齒輪的齒。“:before”和“:after”這兩個(gè)偽元素是CSS中非常重要的元素，可以用來在標(biāo)簽的前后插入內(nèi)容。在本例中，我們在齒輪的前后兩側(cè)分別插入了兩個(gè)長方形的元素，用于表示齒輪的齒。

接著，我們使用transform-origin屬性來設(shè)置元素的中心點(diǎn)，從而使齒輪可以順時(shí)針或逆時(shí)針旋轉(zhuǎn)。最后，我們定義了一個(gè)名為“gear-rotate”的動(dòng)畫，將齒輪旋轉(zhuǎn)360度，并使其無限循環(huán)播放。

在實(shí)際應(yīng)用中，我們可以更改齒輪的樣式，大小和顏色，以達(dá)到不同的效果。而在頁面布局中，可以將齒輪作為裝飾元素，用于增強(qiáng)頁面的視覺效果。