CSS3指針旋轉是一項非常有趣的特性，可以有效地改變指針的方向，為網頁增添不少風格和動感效果。

transform: rotate(30deg);

上述代碼可以將指針的角度旋轉30度，我們也可以通過變量調整旋轉角度。

:root {
--rotate: 30deg;
}
.pointer {
transform: rotate(var(--rotate));
}

指針旋轉還允許我們旋轉不同類型的指針，下面是一些例子：

.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
transform-origin: left center;
}
.needle {
width: 2px;
height: 50%;
background-color: black;
margin: auto;
transform-origin: bottom center;
animation: rotate 2s linear infinite;
}
.hour-hand {
width: 10px;
height: 50px;
background-color: black;
margin: auto;
transform-origin: bottom center;
transform: rotate(var(--hour-rotate));
}
.minute-hand {
width: 5px;
height: 75px;
background-color: black;
margin: auto;
transform-origin: bottom center;
transform: rotate(var(--minute-rotate));
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

以上是一些常見的指針類型，通過改變變量中的旋轉角度，可以輕松地調整指針的指向。此外，我們還可以通過動畫效果使指針逐漸旋轉，增加交互性和視覺效果。

CSS3指針旋轉是一種非常實用的技術，可以為網頁增添不同的風格和動感效果。熟練掌握這一特性，可以使網頁制作更加得心應手。