html - 在 CSS 等距立方体上为面设置动画

Question

我正在尝试为使用 CSS 变换创建的等距立方体的面设置动画，以创建“解包/展开”效果。

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

https://jsfiddle.net/wrgt1/5yrLjnw3/38/

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？）。

标签： htmlcsscss-animationscss-transforms

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>