CSS 等距立方体上的动画面孔

Question

我正在尝试为我使用 CSS 变换创建的等距立方体的面制作动画，以创建 'unpacking/unfolding' 效果。

我想让立方体的盖子向上旋转，但此刻它是浮起来的，而不是从边缘旋转。它在正确的地方开始和结束。我试过更改 transform-origin 属性但它没有什么区别。到目前为止，这是我的代码：

html body {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #C4C5C4;
}

.front,
.back {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.front {
  z-index: 99;
}

.cube {
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(45deg);
}

.face {
  position: absolute;
  width: 30vh;
  height: 30vh;
  background: white;
  border: solid 1px blue;
}

.top {
  transform-origin: 100% 100%;
  transform: rotateX(90deg) rotateY(0deg) translate3d(15vh, 0, 15vh);
  animation: rotatelid 5s linear infinite alternate;
}

.frontleft {
  transform: rotateY(-90deg) translate3d(0, 0, 15vh);
}

.frontright {
  transform: translate3d(0, 0, 15vh);
}

.backleft {
  transform: translate3d(0, 0, -15vh);
  background: lightgrey;
}

.backright {
  transform: rotateY(-90deg) translate3d(0, 0, -15vh);
}

@keyframes rotatelid {
  from {
    transform: rotateX(90deg) rotateY(0deg) translate3d(15vh, 0, 15vh);
  }

  to {
    transform: rotateX(90deg) rotateY(90deg) translate3d(-15vh, 0vh, 15vh);
  }
}

<div class='front'>
  <div class='cube'>
    <div class='face top'></div>
    <div class='face frontleft'></div>
    <div class='face frontright'></div>
  </div>
</div>

<div class='back'>
  <div class='cube'>
    <div class='face backleft'></div>
    <div class='face backright'></div>
  </div>
</div>

有谁知道如何解决这个问题，或者是否有更好的方法在网络上创建简单的动画（可能使用 SVG？）。

Answer 1

更新变换顺序，先平移元素再旋转。注意翻译，因为第一次添加时已经不一样了

html body {
  position: relative;
  height: 100vh;
  margin:0;
  background-color: #C4C5C4;
}

.front,
.back {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.front {
  z-index: 99;
}

.cube {
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(45deg);
}

.face {
  position: absolute;
  width: 30vh;
  height: 30vh;
  background: white;
  border: solid 1px blue;
  box-sizing:border-box;
}

.top {
  transform-origin: 100% 100%;
  transform: translate3d(15vh, -15vh, 0vh) rotateX(90deg) rotateY(0deg);
  animation: rotatelid 5s linear infinite alternate;
}

.frontleft {
  transform: rotateY(-90deg) translate3d(0, 0, 15vh);
}

.frontright {
  transform: translate3d(0, 0, 15vh);
}

.backleft {
  transform: translate3d(0, 0, -15vh);
  background: lightgrey;
}

.backright {
  transform: rotateY(-90deg) translate3d(0, 0, -15vh);
}

@keyframes rotatelid {
  from {
    transform:translate3d(15vh, -15vh, 0vh) rotateX(90deg) rotateY(0deg);
  }

  to {
    transform:translate3d(15vh, -15vh, 0vh) rotateX(90deg) rotateY(90deg);
  }
}

<div class='front'>
  <div class='cube'>
    <div class='face top'></div>
    <div class='face frontleft'></div>
    <div class='face frontright'></div>
  </div>
</div>

<div class='back'>
  <div class='cube'>
    <div class='face backleft'></div>
    <div class='face backright'></div>
  </div>
</div>

CSS 等距立方体上的动画面孔

Animating faces on a CSS isometric cube

html

css

css-transforms

css-animations