Question

我有两个相同的要素。对于第二个，我沿X轴平移并在XY平面中旋转90度。

这很好，直到我应用动画。然后动画就起作用了，但是原始的变换没有发生。

如果我注释掉动画，变换将再次发生。

我知道我在这里缺少一些核心了解。有人可以指出我正确的方向吗？

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">

        <title>Polyhedral play</title>
        <meta name="description" content="Testing CSS transforms etc.">
        <meta name="author" content="John Lynch">

        <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>

    <body> 
        <div class="scene">
            <div class="wrapper">
              <div class="cube">
                <div class="face front">front</div>
                <div class="face back">back</div>
                <div class="face left">left</div>
                <div class="face right">right</div>
                <div class="face top">top</div>
                <div class="face bottom">base</div>
              </div>
              <div class="cube">
                <div class="face front">front</div>
                <div class="face back">back</div>
                <div class="face left">left</div>
                <div class="face right">right</div>
                <div class="face top">top</div>
                <div class="face bottom">base</div>
              </div>
            </div>
        </div>
    </body>

@keyframes fall {
  0%   {transform: translateY(0px)}

  50%  {transform: translateY(250px)}

  100% {transform: translateY(500px)}
}

html, body {
  height:100%;
  width: 100%;
  overflow: hidden;
  background-color: black;
}

.scene {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.wrapper {
  width: 1000px;
  height: 800px;
  position: relative;
  perspective: 100;
  perspective-origin: left top;
  transform-style: preserve-3d;
  border: 2px solid #ffddbb;
}

.cube {
  position: absolute;
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
  transform: translateZ(-100px);
  /*animation: fall 5s linear alternate 2;*/
}

.cube:nth-child(1) {

  animation: fall  5s 0.3s ease 2 alternate both;
}

.cube:nth-child(2) {
  transform: translateX(500px)  rotateZ(0.25turn);
  animation: fall  5s 0.8s linear 2 alternate both;
}

.face {
  position: absolute;
  backface-visibility: hidden;
  overflow: hidden;
  width: 200px;
  height: 200px;
  font-size: 3.5em;
  font-weight: bold;
  text-align: center;
  line-height: 3em;
  border: 6px solid darkblue;
  border-radius: 10px;
}

.cube .front {
  transform: rotateY(0deg) translateZ(100px);
  background-color: crimson;

}
.cube .back {
  transform: rotateX(180deg) translateZ(100px);
  background-color: deepskyblue;

}
.cube .right {
  transform: rotateY(90deg) translateZ(100px);
  background-color: goldenrod;

}
.cube .left {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: magenta;

}
.cube .top {
  transform: rotateX(90deg) translateZ(100px);
  background-color: skyblue;

}
.cube .bottom {
  transform: rotateX(-90deg) translateZ(100px);
  background-color: steelblue;

}

动画似乎禁用变换

0 个答案: