CSS3旋轉(zhuǎn)壽司已成為網(wǎng)友們熱門的DIY項(xiàng)目。通過視頻教程，大家可以自主學(xué)習(xí)并制作出自己喜歡的壽司。

.sushi {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #FF4136;
animation: rotate 5s linear infinite;
}
.sushi::before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 75px 130px 75px;
border-color: transparent transparent #FF4136 transparent;
position: absolute;
top: -30px;
left: 0;
}
.sushi::after {
content: "";
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

在這段代碼中，我們使用了偽元素來制作壽司的三個(gè)組成部分。首先是主體部分，通過border-radius來制作圓形，并使用動畫讓壽司旋轉(zhuǎn)。接下來是壽司的頂端，我們使用border-style來制作三角形，并設(shè)置透明顏色，以達(dá)到卷起的效果。最后是壽司的內(nèi)陷部分，采用白色圓形元素配合相對定位和transform屬性來制作。通過這些技巧，我們最終完成了一個(gè)逼真的壽司圖案。