CSS是我們日常開發中經常用到的技術之一。它可以實現許多種效果，讓我們的網頁更加生動有趣。在本文中，我們將介紹如何使用CSS實現過山車式旋轉的效果。

.box {
width: 250px;
height: 250px;
position: relative;
transform-style: preserve-3d;
transform-origin: center center;
animation: rotate 1.5s infinite linear;
}
.box div {
position: absolute;
width: 150px;
height: 150px;
background-color: #f6c;
border-radius: 50%;
transform-style: preserve-3d;
animation: rotate 1.5s infinite linear reverse;
}
.box div:nth-child(1) {
top: 10px;
left: 60px;
transform: rotateX(90deg) rotateY(90deg);
}
.box div:nth-child(2) {
top: 60px;
left: 10px;
transform: rotateX(90deg) rotateY(0deg);
}
.box div:nth-child(3) {
top: 60px;
left: 110px;
transform: rotateX(90deg) rotateY(180deg);
}
.box div:nth-child(4) {
top: 110px;
left: 60px;
transform: rotateX(90deg) rotateY(270deg);
}
@keyframes rotate {
to {
transform: rotateX(360deg) rotateY(360deg);
}
}

以上代碼實現了一個過山車式旋轉的效果。我們首先創建一個容器元素，使用preserve-3d屬性開啟3D空間，使得元素的旋轉效果更加生動。接著在容器中放置四個圓形元素，通過旋轉的方式呈現出過山車的樣子，其中使用nth-child偽類來選擇每一個圓形元素，依次旋轉不同的角度。最后，我們通過animation屬性來實現元素的旋轉，使得整個效果看起來更加生動。

通過以上代碼，我們可以得到一個生動有趣的過山車式旋轉效果，這樣的效果在網頁中應用，可以為用戶帶來更好的視覺體驗。