在CSS3中，我們可以使用transform屬性來實現(xiàn)指南針的原地旋轉，以下是一個簡單的示例，展示如何使用CSS3讓指南針原地旋轉：

1、HTML結構：

<div class="指南針">
  <div class="指針"></div>
</div>

2、CSS樣式：

.指南針 {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 50%;
  position: relative;
}
.指針 {
  width: 50%;
  height: 2px;
  background-color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 100%;
}

3、JavaScript：

let compass = document.querySelector('.指南針');
let pointer = document.querySelector('.指針');
let angle = 0;
function rotate() {
  angle += 1;
  if (angle > 360) angle = 0;
  pointer.style.transform =rotate(${angle}deg);
  requestAnimationFrame(rotate);
}
rotate();

在這個示例中，我們創(chuàng)建了一個帶有指針的指南針，通過使用transform屬性，我們可以將指針旋轉到不同的角度，在JavaScript中，我們使用了一個簡單的動畫函數(shù)來持續(xù)地旋轉指針。requestAnimationFrame函數(shù)用于在下一次重繪之前調(diào)用指定的函數(shù)，從而創(chuàng)建平滑的動畫效果。