CSS3如何创建3D效果

在CSS3中，你可以使用perspective、transform和transform-style属性来创建3D效果。以下是一个简单的示例，展示了如何创建一个3D旋转的立方体：

1. 首先，创建一个HTML结构，包含一个立方体的每个面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>3D Cube</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <div class="scene">
        <div class="cube">
            <div class="face front">Front</div>
            <div class="face back">Back</div>
            <div class="face right">Right</div>
            <div class="face left">Left</div>
            <div class="face top">Top</div>
            <div class="face bottom">Bottom</div>
        </div>
    </div>
</body>
</html>

2. 接下来，在CSS文件中设置场景和立方体的样式：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.scene {
    width: 200px;
    height: 200px;
    perspective: 600px; /* 设置透视距离 */
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d; /* 保持子元素的3D变换 */
    animation: rotateCube 10s infinite linear; /* 应用旋转动画 */
}

.face {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.front  { transform: rotateY(  0deg) translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY( 90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX( 90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

3. 最后，创建一个关键帧动画，使立方体旋转：

@keyframes rotateCube {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

这个示例中，我们创建了一个3D立方体，并使其沿着X轴和Y轴旋转。你可以根据需要调整透视距离、旋转速度和其他样式。