整個30s動畫周期 將360度平均分成60份，即每份旋轉6度。在@keyframes中定義6個動畫關鍵幀，每個關鍵幀對應旋轉6度。

@keyframes rotate {
0% {transform: rotateY(0);}
100% {transform: rotateY(360deg);}
}
@keyframes step-1{
0% {transform: rotateY(0);}
100% {transform: rotateY(6deg);}
}
@keyframes step-2{
0% {transform: rotateY(6deg);}
100% {transform: rotateY(12deg);}
}
@keyframes step-3{
0% {transform: rotateY(12deg);}
100% {transform: rotateY(18deg);}
}
@keyframes step-4{
0% {transform: rotateY(18deg);}
100% {transform: rotateY(24deg);}
}
@keyframes step-5{
0% {transform: rotateY(24deg);}
100% {transform: rotateY(30deg);}
}
@keyframes step-6{
0% {transform: rotateY(30deg);}
100% {transform: rotateY(36deg);}
}

接下來，在需要創建360度旋轉的元素上添加以下CSS代碼即可。

.rotate {
animation: rotate 30s linear infinite;
}
.step-1 {
animation: step-1 30s linear infinite;
}
.step-2 {
animation: step-2 30s linear infinite;
}
.step-3 {
animation: step-3 30s linear infinite;
}
.step-4 {
animation: step-4 30s linear infinite;
}
.step-5 {
animation: step-5 30s linear infinite;
}
.step-6 {
animation: step-6 30s linear infinite;
}

需要注意的是，動畫周期時長和頁面上元素的旋轉速度需要一致，否則就會有奇怪的效果。