如何运用CSS的preserve-3d和plane位移旋转技术实现3D魔方旋转效果？

本文共计993个文字，预计阅读时间需要4分钟。

不添加这句，所有元素的transform都会在父容器平面上拍平，Z轴位移和旋转全部失效——你看到的只是6个正方形2D里乱转，根本不成体。它不是选项，是开关。

常见错误：transform-style 写在魔方最外层容器（比如 .cube）上，但它的父级（比如 .scene）没设 perspective，结果还是没立体感。必须两者配合：.scene 设 perspective 控制观察距离，.cube 设 preserve-3d 让6个面真正拥有Z轴空间。

• perspective 值建议 800px–1200px：太小（如 200px）会夸张畸变，太大（如 5000px）接近平行投影，失去深度
• 别把 preserve-3d 错写成 flat（这是默认值，等于没开）
• 动画中若动态增删面，需确保新增元素也继承该样式，否则新面会被拍平

6个面的定位：用 translateZ + rotateX/Y 构建正方体

每个面都是相同尺寸的正方形（比如 100px × 100px），靠 translateZ 拉出前后位置，再用 rotateX 或 rotateY 调整朝向。关键不是“怎么转”，而是“初始朝向必须准确”——否则一动就散架。