要实现3D立方体旋转效果，需要利用 CSS3 的 transform（3D 变换）、perspective（透视）和 animation（动画）属性。
立方体的 6 个面本质是 6 个大小相同的正方形，通过以下步骤组合成立体结构：
所有面绝对定位，重叠在同一位置；
每个面向不同方向平移（translate），拉开空间距离；
旋转每个面的朝向（rotate），使其垂直于对应方向；
给整体添加旋转动画，让立方体动起来。
关键 CSS 属性说明：
perspective：给父容器（.cube-container）设置，模拟人眼到立方体的距离，数值越小，3D 透视效果越明显（比如设为 500px 会更 “近”）。
transform-style: preserve-3d：给立方体主体（.cube）设置，必须开启，否则所有子元素（6 个面）的 3D 变换会被压缩到 2D 平面，失去立体感。
transform-origin：变换的中心点，这里设为立方体中心（50% 50%），确保旋转围绕中心进行。
translateZ/X/Y：平移变换，立方体的每个面需要向不同方向平移 “边长的一半”（150px），才能组成立方体的 6 个面。
rotateX/rotateY：旋转变换，调整每个面的朝向，使其成为立方体的 “前后左右上下” 面。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 立方体旋转特效</title>
<style>
/* 1. 容器：提供透视效果，决定3D视觉的“景深” */
.cube-container {
width: 300px;
height: 300px;
margin: 100px auto;
/* 透视：数值越小，3D效果越强烈（近大远小） */
perspective: 800px;
/* 让子元素的3D变换生效 */
perspective-origin: center center;
}
/* 2. 立方体主体：承载6个面，设置3D变换基点和旋转动画 */
.cube {
width: 100%;
height: 100%;
/* 开启3D空间，否则子元素的3D变换会被扁平化 */
transform-style: preserve-3d;
/* 旋转动画：名称 时长 匀速 无限循环 */
animation: rotateCube 10s linear infinite;
/* 变换基点：立方体中心（默认就是center，显式声明更清晰） */
transform-origin: 50% 50%;
}
/* 3. 立方体的每个面：统一样式 + 各自的3D位置 */
.cube-face {
position: absolute;
width: 300px;
height: 300px;
/* 半透明背景，方便看清立体结构 */
opacity: 0.85;
/* 边框增强立体感 */
border: 2px solid #fff;
/* 文字居中 */
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
font-weight: bold;
color: #fff;
}
/* 前表面：向前平移立方体边长的一半（150px） */
.front {
background-color: #ff6b6b;
transform: translateZ(150px);
}
/* 后表面：向后平移150px + 旋转180°（保证文字正向） */
.back {
background-color: #4ecdc4;
transform: translateZ(-150px) rotateY(180deg);
}
/* 左表面：向左平移150px + 旋转Y轴-90° */
.left {
background-color: #feca57;
transform: translateX(-150px) rotateY(-90deg);
}
/* 右表面：向右平移150px + 旋转Y轴90° */
.right {
background-color: #ff9ff3;
transform: translateX(150px) rotateY(90deg);
}
/* 上表面：向上平移150px + 旋转X轴90° */
.top {
background-color: #54a0ff;
transform: translateY(-150px) rotateX(90deg);
}
/* 下表面：向下平移150px + 旋转X轴-90° */
.bottom {
background-color: #5f27cd;
transform: translateY(150px) rotateX(-90deg);
}
/* 4. 旋转动画：绕Y轴和X轴同时旋转，实现更自然的3D效果 */
@keyframes rotateCube {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="cube-container">
<div class="cube">
<div class="cube-face front">前</div>
<div class="cube-face back">后</div>
<div class="cube-face left">左</div>
<div class="cube-face right">右</div>
<div class="cube-face top">上</div>
<div class="cube-face bottom">下</div>
</div>
</div>
</body>
</html>
川公网安备51010802032098
