CSS手寫陀螺儀的實現步驟：

1.準備三個div，分別命名為"gyro"、"ball"、"point"，設置寬高相等，top和left為50%。
2.給"gyro"設置perspective：1000px。
3.給"ball"設置transform-style：preserve-3d，用來實現3D效果。
4.給"point"設置position：absolute，用來標示陀螺儀的中心點，left和top為50%，寬高為5px。
5.通過CSS動畫控制"ball"的旋轉，如下所示：

@keyframes rotate {
from {transform: rotateX(0) rotateY(0) rotateZ(0);}
to {transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
.ball {
animation-name: rotate;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

通過控制旋轉的速度和方向，即可實現不同類型的陀螺儀效果。