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

爱德华多

在我的项目中，打开主页后，应运行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>

我怎样才能做到这一点？

哈里

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

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

说明：

首先创建一个具有六个面的多维数据集（div每个面一个元素）。我所做的前端面作为的子元素左侧面因素，因为前面应该最终会在左手侧打开左边的脸。
每个面都是一个50 x 50像素的正方形，其transform和transform-origin属性的设置方式可以创建一个立方体。
然后，将打开动画附加到每个面孔，并根据何时打开每个面孔添加延迟。在演示中，右面先打开，因此没有延迟，底面第二次打开，因此延迟为1s（等于右面的动画时间），顶面第三次打开，依此类推具有2s的延迟（等于前两个面的组合动画时间），依此类推。
该背面没有附加因为它根本不需要打开任何动画;）

.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>

注意：很可能也可以通过其他方式获得类似的效果，并且使它们看起来更加逼真，但这很可能涉及大量的转换变换，额外的动画关键帧设置等-简而言之，很多复杂的代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。