在網頁設計中，鉆石形狀的3D旋轉是一種非常炫酷的效果。在CSS中，通過一些簡單的代碼可以實現這樣的效果。下面我們就來看一下如何使用CSS實現鉆石3D旋轉。

.diamond {
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
.diamond:before,
.diamond:after {
content: "";
display: block;
position: absolute;
width: inherit;
height: inherit;
background-color: #F0A500;
}
.diamond:before {
transform: rotateY(90deg) translateZ(50px);
}
.diamond:after {
transform: rotateY(-90deg) translateZ(50px);
}

首先，我們需要創建一個菱形元素（diamond），并設置它的長寬為100像素。然后，使用transform-style屬性將元素的子元素應用3D變換。接著，我們通過transform屬性依次對元素進行繞X和Y軸的旋轉，來使它呈現3D效果。

接下來，我們需要將菱形分成兩半來實現旋轉。這里我們使用:before和:after偽元素來實現。這兩個偽元素都與菱形元素有相同的尺寸和背景顏色。

我們對:before偽元素應用了一個繞Y軸旋轉90度的變換，并將它沿Z軸向前平移50像素。對:after偽元素應用了一個繞Y軸旋轉-90度的變換，并將它沿Z軸向前平移50像素。這樣，我們就得到了兩個位置互相對稱的三角形。

最后，我們對菱形元素和兩個三角形分別應用旋轉動畫來實現變換效果。我們可以使用CSS的@keyframes規則來定義旋轉動畫，然后通過animation屬性來應用它。

通過這些簡單的代碼，我們就可以實現一個炫酷的鉆石3D旋轉效果了！