CSS可以使用transform屬性來實現方向盤的旋轉效果。我們可以使用rotate()方法來實現方向盤的旋轉。讓我們來看一下下面的代碼：

.steering-wheel {
width: 200px;
height: 200px;
background-color: silver;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.steering-wheel-handle {
width: 30px;
height: 100px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform-origin: 50% 100%;
}
/* 以下是JS代碼 */
var steeringWheel = document.querySelector('.steering-wheel');
var steeringWheelHandle = document.querySelector('.steering-wheel-handle');
steeringWheel.addEventListener('mousemove', rotateHandle);
function rotateHandle(e) {
var centerX = steeringWheel.offsetLeft + steeringWheel.offsetWidth / 2;
var centerY = steeringWheel.offsetTop + steeringWheel.offsetHeight / 2;
var angle = Math.atan2(e.pageY - centerY, e.pageX - centerX);
angle = angle * (180 / Math.PI);
angle = angle - 90;
steeringWheelHandle.style.transform = 'rotate(' + angle + 'deg)';
}

在代碼中，我們首先定義了一個會自動隱藏溢出部分的容器，然后在容器內放了一個方向盤的主體和一個方向盤手柄。方向盤主體使用了圓形的border-radius和灰色的背景色，而方向盤手柄則是一個黑色的，寬度為30px，高度為100px的長條形塊。

方向盤手柄的位置是通過設置絕對定位、left:50%和top:50%實現的。然后，通過指定它的transform-origin屬性為50% 100%（這意味著它的坐標系將是從底部中心開始進行旋轉），我們就可以在handle元素中設置旋轉的transform。

在JS代碼中，我們首先獲得了方向盤容器和方向盤手柄元素的引用，然后添加了一個鼠標移動事件監聽器。在事件監聽器函數中，我們首先計算出方向盤容器的中心點，然后使用三角函數和事件當前坐標計算出方向盤的旋轉角度。最后，我們將這個角度應用到手柄元素的transform中以使其旋轉。

因此，這就是如何使用CSS實現方向盤的整個方案，希望這個例子對于您的CSS學習有所幫助！