如何使用 CSS 动画创建如图所示的立方体开口？

Question

在我的项目中，当主页打开时，它应该运行一个 CSS 动画，这样立方体的面就会打开。动画完成后，人脸应该像图片中那样（我需要有一个结果，就像图片中第一次打开）。

这是我的代码，

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  -webkit-animation: sk-foldCubeAngle 2.4s 0.5 linear both;
  animation: sk-foldCubeAngle 2.4s 0.5 linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
  transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
  transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
  transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube5 {
  -webkit-transform: scale(1.1) rotateZ(360deg);
  transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube5 {
  -webkit-transform: scale(1.1) rotateZ(360deg);
  transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.sk-folding-cube .sk-cube5:before {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.sk-folding-cube .sk-cube6:before {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}
@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

<html>

<head>
  <link href="style.css" rel="stylesheet">
  <title>Open Cube</title>
  <h1>Apertura Cubo</h1>
</head>

<body>
  <div class="sk-folding-cube">
    <a href="http://google.com"><div class="sk-cube1 sk-cube"></div></a>
    <div class="sk-cube2 sk-cube"></div>
    <div class="sk-cube4 sk-cube"></div>
    <div class="sk-cube3 sk-cube"></div>
  </div>
</body>

</html>

我该怎么做？

Answer 1

从所提供的描述、片段和图片来看，您似乎正在尝试创建一个扁平的立方体打开动画，其中立方体的每个面一个一个地打开，最终呈现如图所示的外观图片中的第一个示例。

也许可以通过增强您当前的代码来实现这种效果，但我发现它有点混乱，所以我使用了我自己的平面立方体版本。

解释：

首先创建一个有六个面的立方体（每个面一个 div 元素）。我已经将 front 面作为 left 面元素的子元素，因为正面最终应该在左脸。
每个面都是一个 50 x 50 像素的正方形，其 transform 和 transform-origin 属性设置为创建一个立方体。
然后将打开动画附加到每个面，并根据每个面打开的时间添加延迟。在演示中，right 面首先打开，因此没有延迟，bottom 面第二个打开，因此延迟为1s（等于right面的动画时间），top面第三次打开所以延迟2s（等于组合动画前两张脸的时间）等等。
back 脸没有附加任何动画，因为它根本不需要打开 ;)

.cube {
  position: relative;
  margin: 100px;
  transform-style: preserve-3d;
}
.cube div {
  position: absolute;
  height: 50px;
  width: 50px;
  transform-style: preserve-3d;
}
.back {
  background: rebeccapurple;
}
.right {
  background: tomato;
  transform: rotateY(90deg);
  transform-origin: right;
  animation: open-y 1s ease-in-out forwards;
}
.bottom {
  background: crimson;
  transform: rotateX(270deg);
  transform-origin: bottom;
  animation: open-x 1s 1s ease-in-out forwards;
}
.top {
  background: indianred;
  transform: rotateX(90deg);
  transform-origin: top;
  animation: open-x 1s 2s ease-in-out forwards;
}
.left {
  background: yellowgreen;
  transform: rotateY(270deg);
  transform-origin: left;
  animation: open-y 1s 3s ease-in-out forwards;
}
.front {
  background: chocolate;
  transform: rotateY(270deg);
  transform-origin: right;
  animation: open-y 1s 3s ease-in-out forwards;
}
@keyframes open-y {
  to {
    transform: rotateY(180deg);
  }
}
@keyframes open-x {
  to {
    transform: rotateX(180deg);
  }
}

<div class="cube">
  <div class="back"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <div class="top"></div>
  <div class="left">
    <div class="front"></div>
  </div>
</div>

注意：很有可能通过其他方式实现类似的效果，此外还可以使它们看起来更逼真，但这很可能需要大量资金翻译转换、动画的额外关键帧设置等——简而言之，代码复杂得多。

如何使用 CSS 动画创建如图所示的立方体开口？

How to use CSS animations to create a cube's opening like in the picture?

html

css

css-animations

css-shapes