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

Question

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

Edo*_*rdo 5 html css css-animations css-shapes

在我的项目中，当主页打开时，它应该运行一个 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;
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我怎样才能做到这一点？

Answer 1

Har*_*rry 3

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

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

解释：

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

.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);
  }
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

注意：也很有可能以其他方式实现类似的效果，此外还使它们看起来更加真实，但这很可能涉及大量的平移变换、动画的额外关键帧设置等 - 简而言之，更复杂的代码。

归档时间：	9 年，4 月前
查看次数：	564 次
最近记录：	9 年，4 月前