CSS一筆寫3D

.perspective-box {
perspective: 1000px;
transform-style: preserve-3d;
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: translateZ(-100px);
animation: rotate 10s linear infinite;
}
.front, .back, .left, .right, .top, .bottom {
position: absolute;
width: 200px;
height: 200px;
backface-visibility: hidden;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(-90deg) translateZ(100px);
}
.bottom {
transform: rotateX(90deg) translateZ(100px);
}
@keyframes rotate {
0% {
transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

CSS一筆寫3D的技巧主要是利用transform和perspective屬性。首先需要給容器添加perspective屬性，這個屬性決定了3D效果的大小，建議設置在1000px左右。然后在需要3D效果的元素上添加transform屬性，設置3D位移或旋轉等效果，同時需要設置transform-style為preserve-3d，以保留父元素的3D效果。

在創建3D立方體時，需要給立方體容器添加transform-style為preserve-3d，將立方體的每一個面作為絕對定位元素，并設置其大小和位置。注意將每個面的背面設置為不可見，以防止出現穿透現象。

最后，利用keyframes動畫實現3D效果的變化，將3D空間的旋轉、位移等效果連續地呈現在頁面上。