Создание анимации открытия куба

У меня есть следующий код 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>

Ответ 1

Чтобы открыть куб, сначала нужно установить свойство 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>

Ответ 2

Задайте начало трансформирования для края куба с помощью

transform-origin: 0 50% 0;

Затем поверните его вокруг оси z:

transform: rotateZ(90deg);

Я надеюсь, что это сработает для вас, у меня не было возможности проверить его.