Html 如何使用CSS动画创建立方体'；这张照片的开头怎么样？

在我的项目中，当主页打开时，它应该运行CSS动画，以便立方体的面打开。动画完成后，面应该与图片中的类似（我需要有一个结果，就像图片中的第一个开口一样）

这是我的密码

.sk折叠立方体{
保证金：20px自动；
宽度：40px；
高度：40px；
位置：相对位置；
}
.sk折叠立方体.sk立方体{
浮动：左；
宽度：50%；
身高：50%；
位置：相对位置；
-webkit转换：比例（1.1）；
-ms变换：比例（1.1）；
转换：比例（1.1）；
}
.sk折叠立方体。sk立方体：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#000000；
-webkit动画：sk foldCubeAngle 2.4s 0.5线性二者；
动画：sk foldCubeAngle 2.4s 0.5线性二者；
-webkit转换来源：100%100%；
-ms变换原点：100%100%；
变换原点：100%100%；
}
.sk折叠立方体.sk-cube2{
-webkit变换：比例（1.1）旋转（90度）；
变换：比例（1.1）旋转（90度）；
}
.sk折叠立方体.sk-cube3{
-webkit变换：比例（1.1）旋转（180度）；
变换：比例（1.1）旋转（180度）；
}
.sk折叠立方体.sk-cube4{
-webkit变换：比例（1.1）旋转（270度）；
变换：比例（1.1）旋转（270度）；
}
.sk折叠立方体。sk-cube5{
-webkit变换：比例（1.1）旋转（360度）；
变换：缩放（1.1）旋转（360度）；
}
.sk折叠立方体。sk-cube5{
-webkit变换：比例（1.1）旋转（360度）；
变换：缩放（1.1）旋转（360度）；
}
.sk折叠立方体。sk-cube2：之前{
-webkit动画延迟：0.3s；
动画延迟：0.3s；
}
.sk折叠立方体。sk-cube3：之前{
-webkit动画延迟：0.6s；
动画延迟：0.6s；
}
.sk折叠立方体。sk-cube4：之前{
-webkit动画延迟：0.9秒；
动画延迟：0.9秒；
}
.sk折叠立方体。sk-cube5：之前{
-webkit动画延迟：1.2s；
动画延迟：1.2s；
}
.sk折叠立方体。sk-cube6：之前{
-webkit动画延迟：1.5s；
动画延迟：1.5s；
}
@-webkit关键帧sk foldCubeAngle{
0%, 10% {
-webkit变换：透视（140px）旋转（-180度）；
变换：透视（140px）旋转（-180度）；
不透明度：0；
}
25%,
75% {
-webkit变换：透视（140px）旋转（0deg）；
变换：透视（140px）旋转（0deg）；
不透明度：1；
}
90%,
100% {
-webkit变换：透视（140px）旋转（180度）；
变换：透视（140px）旋转（180度）；
不透明度：0；
}
}
@关键帧sk foldCubeAngle{
0%, 10% {
-webkit变换：透视（140px）旋转（-180度）；
变换：透视（140px）旋转（-180度）；
不透明度：0；
}
25%,
75% {
-webkit变换：透视（140px）旋转（0deg）；
变换：透视（140px）旋转（0deg）；
不透明度：1；
}
90%,
100% {
-webkit变换：透视（140px）旋转（180度）；
变换：透视（140px）旋转（180度）；
不透明度：0；
}
}

开放立方体
立方孔

根据所提供的描述、片段和图片判断，您似乎正在尝试创建一个平面立方体打开动画，其中立方体的每个面一个接一个地打开，并以图片中第一个示例所示的外观结束

通过增强您当前的代码可能会达到这种效果，但我发现它有点令人困惑，因此使用了我自己版本的平面立方体

说明：

• 首先创建一个有六个面的立方体（每个面有一个

  div

  元素）。我将前面作为left face元素的子元素，因为前面最终应该在left face的左侧打开
• 每个面都是一个50 x 50 px的正方形，其

  变换

  和

  变换原点

  属性的设置方式使其创建一个立方体
• 然后将打开动画附加到每个面，并根据每个面应打开的时间添加延迟。在演示中，首先打开右侧面，因此它没有延迟，其次打开底部面，因此它有1s的延迟（等于右侧面的动画时间），第三次打开顶部面，因此有2s的延迟（等于前两个面的组合动画时间），以此类推
• 背面没有附加任何动画，因为它根本不需要打开；）

.cube{
位置：相对位置；
利润率：100像素；
变换样式：保留-3d；
}
.cube div{
位置：绝对位置；
高度：50px；
宽度：50px；
变换样式：保留-3d；
}
.回来{
背景：丽贝卡紫；
}
.对{
背景：番茄；
变换：旋转（90度）；
变换原点：右；
动画：open-y 1s轻松进退向前；
}
.底部{
背景：深红色；
变换：rotateX（270度）；
变换原点：底部；
动画：开放式x 1s 1s轻松进退向前；
}
.顶{
背景：印度红；
变换：rotateX（90度）；
变换原点：顶部；
动画：open-x 1s 2s向前缓进缓出；
}
.左{
背景：黄绿色；
变换：旋转（270度）；
变换原点：左；
动画：开放式1s 3s向前放松；
}
.前线{
背景：巧克力；
变换：旋转（270度）；
变换原点：右；
动画：开放式1s 3s向前放松；
}
@关键帧open-y{
到{
变换：旋转（180度）；
}
}
@关键帧open-x{
到{
变换：rotateX（180度）；
}
}

---

根据所提供的描述、片段和图片判断，您似乎正在尝试创建一个平面立方体打开动画，其中立方体的每个面一个接一个地打开，并以图片中第一个示例所示的外观结束

通过提高你的能力，也许可以达到这种效果