创建立方体打开动画答案

【问题标题】：Creating a cube opening animation创建立方体打开动画
【发布时间】：2017-04-21 04:07:24
【问题描述】：

我有以下 HTML 和 CSS 代码来绘制立方体的顶部。所以它向下移动，我希望它像打开一样动画。我无法弄清楚如何改变顶部以使其看起来可以打开。

我已经包含了多维数据集的整个代码。关于这个，我要顶开。

.pers500 {
  perspective: 500px;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */

.container {
  width: 25%;
  margin: 0 auto;
  margin-top: 2em;
  border: none;
  animation-name: moveDown;
  animation-duration: 2s;
  animation-timing-function: linear;
  transform: translate(0px, 110px);
}
.cube {
  width: 70%;
  height: 70%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  -webkit-perspective-origin: 150% 150%;
  -webkit-transform-style: preserve-3d;
}
.face {
  display: block;
  position: absolute;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}
/* Define each face based on direction */

.front {
  width: 3.64em;
  height: 3.43em;
  background-color: rgba(0, 255, 0, 0.7);
  transform: translateZ(50px) translateX(171px) translateY(222px);
  -webkit-transform: translateZ(50px) translateX(171px) translateY(222px);
  -moz-transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
  width: 2em;
  height: 3.4em;
  background-color: rgba(0, 0, 255, 0.7);
  margin: 70px;
  transform: skewY(40deg) translateZ(50px);
  -webkit-transform: skewY(40deg) translateZ(50px) translateY(65px) translateX(-20px);
  -moz-transform: skewY(40deg) translateZ(50px) translateY(62px) translateX(-20px);
}
.top {
  width: 3.65em;
  height: 1.7em;
  background-color: rgba(255, 0, 0, 0.7);
  margin: 100px;
  transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
  -webkit-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
  ;
  -moz-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
  ;
  animation-name: openTop;
  animation-duration: 2s;
  animation-timing-function: linear;
}
@-webkit-keyframes moveDown {
  0% {
    transform: translate(0px, 10px);
  }
  50% {
    transform: translate(0px, 55px);
  }
  100% {
    transform: translate(0px, 110px);
  }
}
@keyframes moveDown {
  0% {
    transform: translate(0px, 10px);
  }
  50% {
    transform: translate(0px, 55px);
  }
  100% {
    transform: translate(0px, 110px);
  }
}
@keyframes openTop {
  /*0% {transform:rotateX(30deg);}
	50% {transform:rotateX(30deg);}
	100% {transform:rotateX(30deg);} commented code here doesn't work*/
}

<div class="container">
  <div class="cube pers500">
    <div class="face front"></div>
    <div class="face top"></div>
    <br>
    <br>
    <br>
    <div class="face left"></div>
  </div>
</div>

【问题讨论】：

开幕，在某种意义上？你有一个样本，比如它应该如何发生或比较？
请阅读：minimal reproducible example |你试过什么？发生什么了？你预计会发生什么？

标签： css css-animations css-shapes css-transforms

【解决方案1】：

将变换原点设置为立方体的边缘

transform-origin: 0 50% 0;

然后绕z轴旋转：

transform: rotateZ(90deg);

我希望这对你有用，我没有机会测试它。

【讨论】：

对不起，没有

【解决方案2】：

要打开立方体，首先需要将transform-origin 属性（如另一个答案中所述）设置为top。此设置将使.face.top 的顶部在执行旋转时保持固定。然后您需要使用rotateX() 添加旋转。这将旋转顶面以产生打开效果。请注意，transform 属性应包含完整的转换列表才能正确打开。您不能只在动画中单独添加rotateX()。

.pers500 {
  perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */

.container {
  width: 25%;
  margin: 0 auto;
  margin-top: 2em;
  border: none;
  animation-name: moveDown;
  animation-duration: 2s;
  animation-timing-function: linear;
  transform: translate(0px, 110px);
}
.cube {
  width: 70%;
  height: 70%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}
.face {
  display: block;
  position: absolute;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
  border: 1px solid brown; /* just for testing */
}
/* Define each face based on direction */

.front {
  width: 3.64em;
  height: 3.43em;
  background-color: rgba(0, 255, 0, 0.7);
  transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
  width: 2em;
  height: 3.43em;
  background-color: rgba(0, 0, 255, 0.7);
  margin: 70px;
  transform: skewY(40deg) translateZ(50px) translateY(64px) translateX(-20px);
}
.top {
  width: 3.65em;
  height: 1.69em;
  background-color: rgba(255, 0, 0, 0.7);
  margin: 100px;
  transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
  transform-origin: top;
  animation-name: openTop;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@-webkit-keyframes moveDown {
  0% {
    transform: translate(0px, 10px);
  }
  50% {
    transform: translate(0px, 55px);
  }
  100% {
    transform: translate(0px, 110px);
  }
}
@keyframes moveDown {
  0% {
    transform: translate(0px, 10px);
  }
  50% {
    transform: translate(0px, 55px);
  }
  100% {
    transform: translate(0px, 110px);
  }
}
@keyframes openTop {
  0% {
    transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
  }
  100% {
    transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(200deg);
  }
}

<div class="container">
  <div class="cube pers500">
    <div class="face front"></div>
    <div class="face top"></div>
    <br>
    <br>
    <br>
    <div class="face left"></div>
  </div>
</div>

注意：

设置transform-origin 会影响演示中顶面的位置，因此您在顶面上使用的translateX() 和translateY() 的值需要像上面一样进行修改演示。
应始终在标准属性之前添加以供应商为前缀的属性版本，以防万一。
为了简单起见，我在上面的 sn-p 中删除了供应商前缀版本。

【讨论】：