CSS旋轉地摩天輪是一種非常有趣的效果，可以讓網頁更加生動、有趣。

代碼如下：
html：
<div class="circle">
<div class="wheel"></div>
<div class="car"></div>
</div>
css：
.circle {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #e6f7ff;
margin: 0 auto;
}
.wheel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
width: 70px;
height: 70px;
border-radius: 50%;
border: 10px solid #999;
box-shadow: -5px -5px 10px #e6f7ff,
5px 5px 10px rgba(0,0,0,.2);
animation: wheel-rotate 6s linear infinite;
}
.car {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
width: 30px;
height: 30px;
border-radius: 50%;
border: 5px solid #f386a5;
background-color: #fc9d9a;
box-shadow: -5px -5px 10px #fc9d9a,
5px 5px 10px rgba(0,0,0,.2);
animation: car-move 6s linear infinite;
}
@keyframes wheel-rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes car-move {
from {
top: 0;
}
50% {
top: 50%;
}
to {
top: 0;
}
}

代碼解析：

首先，在html中，我們定義了一個圓形的div，并給它一個類名為“circle”，在這個圓形div內部，我們又定義了兩個子div。第一個子div，類名為“wheel”，代表的是摩天輪的輪子。第二個子div，類名為“car”，代表的是摩天輪的小車，即用來載客的。

在 css 中，首先定義了圓形的div，使它居中，并給它添加了背景色和圓角。wheel和car的樣式都是position為 absolute，這樣它們就可以完全絕對定位。并設置transform，讓輪子和小車相對于圓形中心旋轉和移動。

最后，我們對輪子和小車各自設置了動畫效果，讓它們可以無限循環地轉動。