CSS3 3D旋轉(zhuǎn)是一個非常有趣和好玩的特效，當(dāng)應(yīng)用于一個網(wǎng)站或者一個界面中，不僅可以增加一些趣味性和交互性，還能提高用戶的體驗感。下面是一些常用的CSS3 3D旋轉(zhuǎn)代碼，可以讓你在設(shè)計中輕松實現(xiàn)3D效果。

/* 以下代碼可以讓原來的2D圖形旋轉(zhuǎn)變成3D的效果 */
.card {
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:hover {
transform: rotateY(180deg);
}
/* 以下代碼可以讓一塊區(qū)域呈現(xiàn)出立體的效果 */
.box {
width: 200px;
height: 200px;
background: #fff;
position: relative;
perspective: 500px; /* 設(shè)置視距為500px，這樣可以讓3D效果更加真實 */
}
.box .face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 防止可見的背面出現(xiàn) */
}
.box .face.front {
transform: rotateY(0deg);
}
.box .face.back {
transform: rotateY(180deg);
}
/* 以下代碼可以讓一個立體的盒子做出旋轉(zhuǎn)和放大的效果 */
.box {
position: relative;
}
.box .front, .box .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
}
.box .front {
background-color: #fa8072;
transform-origin: center center 50px; /* 設(shè)置旋轉(zhuǎn)點的位置 */
transform: rotateX(0deg) scale(1);
}
.box .back {
background-color: #1e90ff;
transform-origin: center center -50px;
transform: rotateX(-180deg) scale(0.5); /* 設(shè)置旋轉(zhuǎn)和縮放同時發(fā)生 */
}
.box:hover .front {
transform: rotateX(180deg) scale(0.5);
}
.box:hover .back {
transform: rotateX(0deg) scale(1);
}

以上代碼只是其中的一小部分，但是已經(jīng)擁有了極高的可玩性和實用性，當(dāng)你想要在你的網(wǎng)站或者頁面中加入3D效果時，可以參考以上的代碼來實現(xiàn)。當(dāng)然，如果你擁有更好的代碼或者特效，歡迎在下方評論區(qū)里面分享給我們。