CSS3旋轉(zhuǎn)壽司是一種流行的動畫效果，適用于展示各種美食的網(wǎng)站。在上海和杭州，有很多餐廳提供美味的壽司，這個動畫效果可以用來吸引顧客的眼球。

.sushi {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: white;
position: relative;
margin: 50px auto;
transform-style: preserve-3d;
perspective: 600px;
transition: transform 1s;
}
.sushi:hover {
transform: rotateY(180deg);
}
.sushi .front,
.sushi .back {
position: absolute;
width: 150px;
height: 150px;
backface-visibility: hidden;
}
.sushi .front {
transform: translateZ(75px);
background-image: url('front.png');
background-size: cover;
}
.sushi .back {
transform: rotateY(180deg) translateZ(75px);
background-image: url('back.png');
background-size: cover;
}

這段代碼定義了一個類名為sushi的div元素，并設(shè)置了它的寬度、高度、圓角、背景顏色和位置。使用perspective屬性，可以為元素和它的子元素創(chuàng)建一個三維空間。transition屬性指定元素的變換效果，在這里是旋轉(zhuǎn)1秒。當(dāng)鼠標(biāo)懸停在sushi元素上時，使用:hover偽類，將元素繞Y軸旋轉(zhuǎn)180度。每個sushi元素都包含一個front div和一個back div，用于分別顯示前面和后面的圖像。使用transform屬性，將front div向前移動，back div旋轉(zhuǎn)并向后移動，創(chuàng)建了一個逼真的旋轉(zhuǎn)效果。

在上海和杭州，有很多餐廳可以品嘗到精致的壽司，正宗的日式口味讓人無法抗拒。CSS3旋轉(zhuǎn)壽司效果可以用來展示這些美食，讓網(wǎng)站更加生動有趣。