CSS 实现 3D 旋转立方体

本页面是个人博客中文章的实现,原文参见: https://chengww.com/archives/css-cube.html

最终成果

Step 1

将立方体的 6 个面放在同一个平面上。此时所有的图片是堆叠在一起的

Step 2

将每个面旋转到其对应的位置,以立方体左侧为例

Step 3

同理将其他几个面也旋转到指定的位置

Step 4

最后将整个立方体添加旋转动画即可

* 本页面中所有图片来自原神官网