Почему мой куб «прыгает», когда я использую CSS-трансформации, такие как rotateZ ()?

Question

Я сделал простую анимацию с кубом, где он перемещается по краям панели, и у меня возникают проблемы с тем, как он вращается в каждом углу.Для первых двух углов это нормально и вращается плавно, но для других куб, кажется, «прыгает», прежде чем он возвращается в свое положение и продолжает двигаться снова.Пока что я только что использовал rotateZ () в своих преобразованиях.

Я пытался поиграться с такими вещами, как transform-origin, но я не смог найти решение сам.Я не уверен, что еще делать, поскольку я не знаю, есть ли проблема с источником или это что-то вроде размера.Я все еще новичок в анимации, поэтому прошу прощения за любые глупые ошибки.

Пожалуйста, найдите код ниже (только HTML и CSS).

.perspective {
  background: gray;
  background-size: 50px 50px;
  height: 500px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 500px;
  transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
  -webkit-transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
  transform-origin: 0% 0%;
  transform-style: preserve-3d;
  animation: test 20s forwards;
}

.cube__face {
  position: absolute;
  width: 50px;
  height: 50px;
  background: blue;
}

.cube__face--front {
  transform: rotateY( 0deg) translateZ(25px);
  background: red;
}

.cube__face--right {
  transform: rotateY( 90deg) translateZ(25px);
  background: green;
}

.cube__face--back {
  transform: rotateY(180deg) translateZ(25px);
  background: yellow;
}

.cube__face--left {
  transform: rotateY(-90deg) translateZ(25px);
  background: pink;
}

.cube__face--top {
  transform: rotateX( 90deg) translateZ(25px);
  background: purple;
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(25px);
  background: orange;
}

@keyframes test {
  0% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
  }
  2% {
    transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(0px) translateX(0px);
  }
  4% {
    transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(75px) translateX(-50px);
  }
  6% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(150px) translateX(0px);
  }
  8% {
    transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(150px) translateX(0px);
  }
  10% {
    transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(225px) translateX(-50px);
  }
  12% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(300px) translateX(0px);
  }
  14% {
    transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(300px) translateX(0px);
  }
  16% {
    transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(375px) translateX(-50px);
  }
  18% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
  }
  20% {
    transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
  }
  22% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(0px);
  }
  24% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(75px);
  }
  26% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(150px);
  }
  28% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(150px);
  }
  30% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(225px);
  }
  32% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(300px);
  }
  34% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(300px);
  }
  36% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(375px);
  }
  38% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
  }
  40% {
    transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
  }
  /* X */
  42% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-500px);
  }
  44% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-425px);
  }
  46% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-350px);
  }
  48% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-350px);
  }
  50% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-275px);
  }
  52% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-200px);
  }
  54% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-200px);
  }
  56% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-125px);
  }
  58% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
  }
  60% {
    transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
  }
  62% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-500px) translateX(-0px);
  }
  64% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-500px) translateX(-0px);
  }
  66% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-425px) translateX(-0px);
  }
  68% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-350px) translateX(-0px);
  }
  70% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-350px) translateX(-0px);
  }
  72% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-275px) translateX(-0px);
  }
  74% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-200px) translateX(-0px);
  }
  76% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-200px) translateX(-0px);
  }
  78% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-125px) translateX(-0px);
  }
  80% {
    transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-50px) translateX(-0px);
  }
  82% {
    transform: rotateZ(-360deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(0px) translateX(-0px);
  }
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cube Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="perspective">
      <div class="cube">
        <div class="cube__face cube__face--front"></div>
        <div class="cube__face cube__face--back"></div>
        <div class="cube__face cube__face--right"></div>
        <div class="cube__face cube__face--left"></div>
        <div class="cube__face cube__face--top"></div>
        <div class="cube__face cube__face--bottom"></div>
      </div>
    </div>
  </body>

</html>

Answer 1

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

Кроме того, установите размер куба равным размеру видимого куба и центру движения в его центре.

Тогда все проще, как видно из анимации куба

.perspective {
  background: gray;
  background-size: 50px 50px;
  height: 400px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 400px;
  transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.cube {
  width: 50px;
  height: 50px;
  position: relative;
  transform-style: preserve-3d;
  animation: test 20s linear forwards;
}

.cube__face {
  position: absolute;
  width: 50px;
  height: 50px;
  background: blue;
}

.cube__face--front {
  transform: rotateY( 0deg) translateZ(50px);
  background: red;
}

.cube__face--right {
  transform: translateZ(25px) rotateY(90deg) translateZ(25px);
  background: green;
}

.cube__face--back {
  transform: translateZ(25px) rotateY(180deg) translateZ(25px);
  background: yellow;
}

.cube__face--left {
  transform: translateZ(25px) rotateY(-90deg) translateZ(25px);
  background: pink;
}

.cube__face--top {
  transform: translateZ(25px) rotateX( 90deg) translateZ(25px);
  background: purple;
}

.cube__face--bottom {
  transform: translateZ(25px) rotateX(-90deg) translateZ(25px);
  background: orange;
}

@keyframes test {
  0% {
    transform: translate(0px 0px);
  }
  20% {
    transform: translate(0px, 350px);
  }
  30% {
    transform:  translate(0px, 350px) rotateZ(-90deg);
  }
  45% {
    transform:  translate(350px, 350px) rotateZ(-90deg);
  }
  55% {
    transform:  translate(350px, 350px) rotateZ(-180deg);
  }
  70% {
    transform:  translate(350px, 0px) rotateZ(-180deg);
  }
  80% {
    transform:  translate(350px, 0px) rotateZ(-270deg);
  }
  90% {
    transform:  translate(0px, 0px) rotateZ(-270deg);
  }
  100% {
    transform:  translate(0px, 0px) rotateZ(-360deg);
  }
}

    <div class="perspective">
      <div class="cube">
        <div class="cube__face cube__face--front"></div>
        <div class="cube__face cube__face--back"></div>
        <div class="cube__face cube__face--right"></div>
        <div class="cube__face cube__face--left"></div>
        <div class="cube__face cube__face--top"></div>
        <div class="cube__face cube__face--bottom"></div>
      </div>
    </div>

Answer 2

Я думаю, что источник преобразования вызывает проблемы, так как вы пытаетесь одновременно переводить и вращать.Добавьте дополнительную обертку вокруг вашего куба.Затем примените ваши переводы к внешнему div, а ваши повороты - к своему внутреннему div.

Я немного упростил ваш пример для иллюстрации, но вы получите идею:

.perspective {
  background: gray;
  background-size: 50px 50px;
  height: 500px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 500px;
  transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.wrapper {
  width: 50px;
  height: 50px;
  position: relative;
  transform: translate3d(0, 0, 25px);
  transform-origin: 0 0 0;
  transform-style: preserve-3d;
  animation: translation 10s forwards;
}

.cube {
  width: 50px;
  height: 50px;
  position: relative;
  transform: rotate3d(0, 0, 0);
  transform-origin: 25px 25px 0;
  transform-style: preserve-3d;
  animation: rotation 10s forwards;
}

.cube__face {
  position: absolute;
  width: 50px;
  height: 50px;
  background: blue;
}

.cube__face--front {
  transform: rotateY( 0deg) translateZ(25px);
  background: red;
}

.cube__face--right {
  transform: rotateY( 90deg) translateZ(25px);
  background: green;
}

.cube__face--back {
  transform: rotateY(180deg) translateZ(25px);
  background: yellow;
}

.cube__face--left {
  transform: rotateY(-90deg) translateZ(25px);
  background: pink;
}

.cube__face--top {
  transform: rotateX( 90deg) translateZ(25px);
  background: purple;
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(25px);
  background: orange;
}

@keyframes translation {
  0% {
    transform: translate3d(0, 0, 25px);
  }
  25% {
    transform: translate3d(0, 450px, 25px);
  }
  50% {
    transform: translate3d(450px, 450px, 25px);
  }
  75% {
    transform: translate3d(450px, 0, 25px);
  }
  100% {
    transform: translate3d(0, 0, 25px);
  }
}

@keyframes rotation {
  0% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(270deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cube Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="perspective">
      <div class="wrapper">
        <div class="cube">
          <div class="cube__face cube__face--front"></div>
          <div class="cube__face cube__face--back"></div>
          <div class="cube__face cube__face--right"></div>
          <div class="cube__face cube__face--left"></div>
          <div class="cube__face cube__face--top"></div>
          <div class="cube__face cube__face--bottom"></div>
        </div>
      </div>
    </div>
  </body>

</html>