CSS實現(xiàn)立體旋轉(zhuǎn)圓角，可以給網(wǎng)頁設(shè)計增加更多的立體感，讓用戶瀏覽網(wǎng)頁更加流暢有趣。可以使用CSS3中的transform屬性和border-radius屬性實現(xiàn)該效果。

/*定義一個div容器*/
.container {
width: 200px;
height: 200px;
border-radius: 50%; /*設(shè)置圓角*/
background: #eee;
position: relative;
}
/*定義邊框的三個面*/
.container:before,
.container:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%; /*設(shè)置圓角*/
box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 
0 0 20px rgba(0,0,0,0.6); /*設(shè)置陰影*/
transform: rotateX(70deg) rotateY(45deg);
}
.container:before {
transform-origin: top;
}
.container:after {
transform-origin: bottom;
}

上面的代碼中，我們首先定義了一個div容器，然后使用border-radius屬性設(shè)置圓角。接著使用:before和:after偽元素來定義兩面邊框，使用box-shadow屬性設(shè)置陰影，使用transform屬性設(shè)置旋轉(zhuǎn)角度。最后使用transform-origin屬性來設(shè)置從哪里開始旋轉(zhuǎn)。