CSS可以用來制作各種炫酷的效果，其中旋轉水晶效果是一種非常受用戶歡迎的效果。下面就來介紹一下如何使用CSS制作旋轉水晶效果。

.crystal {
position: relative;
height: 0;
width: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid #59ABE3;
}
.crystal:before,
.crystal:after {
position: absolute;
content: '';
left: -100px;
height: 0;
width: 0;
}
.crystal:before {
top: -50px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid #59ABE3;
}
.crystal:after {
top: 50px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid #59ABE3;
transform: rotateY(180deg);
}

上面的CSS代碼中，我們首先定義了一個名為crystal的類，這個類表示整個水晶的外框。我們在這個類中定義了一個三角形，這個三角形的左邊是一個直角，右邊是一個斜角。

在這個類的:before和:after偽元素中，我們分別定義了兩個三角形，他們分別放置在水晶的上下兩側。這些三角形與整個水晶的外框呈三角形的形狀，從而產(chǎn)生了旋轉水晶的效果。

最后，我們在:after偽元素中使用了transform屬性，將它旋轉了180度，使得整個水晶看起來更真實。

使用上面的CSS代碼，我們就可以在網(wǎng)頁中制作出美麗而炫酷的旋轉水晶效果。