DEV Community
·
单个div真正实现3D立方体📦，纯CSS制作！(他们说这是不可能的！)
💡
原文英文，约2100词，阅读约需8分钟。
📝
内容提要
作者通过单个div成功创建了一个3D旋转立方体，克服了计算可见面、旋转和位置变化等挑战，认为这是他最大的成就之一。
🎯
关键要点
- 作者通过单个div成功创建了一个3D旋转立方体，克服了许多挑战。
- 许多人认为使用单个div创建3D立方体是不可能的，但作者喜欢挑战不可能的任务。
- 作者在尝试了三次后终于成功，认为这是他最大的成就之一。
- 创建3D立方体的关键在于计算哪些面朝向相机，并显示这三面。
- 作者使用了复杂的数学计算来确定立方体的X、Y和Z坐标。
- 通过计算点积，作者能够确定哪些面最接近相机并显示它们。
- 在使用单个div时，前后面的位置变化会影响左右面和上下面的显示。
- 作者解决了旋转超过90度时面的位置变化问题，确保正确显示立方体的各个面。
- 提供了一个互动演示，用户可以通过滑块设置X和Y旋转，观察效果。
➡️
