Проблемы с анимацией CSS

ProgramBox

Проблемы с анимацией CSS

Post author:admin
Запись опубликована:30 августа, 2022
Post category:Вопросы по программированию

#html #css #css-animations #keyframe

#HTML #css #css-анимации #ключевой кадр

Вопрос:

Я хочу, чтобы кубы оставались на месте и вращались вокруг оси на 360 градусов. Мои кубы вращаются вокруг оси на 360 градусов. но анимация сходит с ума, и кубы также смещаются с места. Как я могу заставить их вращаться на месте?

Мой CSS:

 @red: rgb(131, 168, 226);
@size: 100px;
body {
  background-color: #dff;
}

header {
  text-align: center;
}

h1 {
  text-align: center;
  padding: 9px;
}

.wrap {
  perspective: 1000px;
  perspective-origin: 46% 70px;
}

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 100px;
  width: 200px;
  height: 200px;
}
.cube:hover {
  animation-play-state: running;
}
@keyframes spin {
  5% {
    transform: rotateY(360deg);
  }
}

.back {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-270deg) translateX(87px);
  transform-origin: top right;
}

.left {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-109px);
  transform-origin: top center;
}

.bottom {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(90deg) translateY(109px);
  transform-origin: bottom center;
}

.front {
  text-align: center;
  color: rgb(173, 222, 247);
  opacity: 0.50;
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(109px);
}

.wrap2 {
  perspective: 1000px;
  perspective-origin: 40% 70px;
}

.cube2 {
  position: relative;
  width: 100px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube2 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 500px;
  width: 200px;
  height: 200px;
}

.cube2:hover {
  animation-play-state: running;
}

.back2 {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-100px) rotateY(180deg);
}

.right2 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-90deg) translateX(87px);
  transform-origin: top right;
}

.left2 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(90deg) translateX(-100px);
  transform-origin: center left;
}

.top2 {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-109px);
  transform-origin: top center;
}

.bottom2 {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(90deg) translateY(109px);
  transform-origin: bottom center;
}

.front2 {
  text-align: center;
  opacity: 0.50;
  color: rgb(173, 222, 247);
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(109px);
}

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
}

.cube3 {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube3 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 999px;
  width: 200px;
  height: 200px;
}

.cube3:hover {
  animation-play-state: running;
}

.back3 {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-110px) rotateY(180deg);
}

.right3 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-95deg) translateX(110px);
  transform-origin: top right;
}

.left3 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-270deg) translateX(-90px);
  transform-origin: center left;
}

.top3 {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-95px);
  transform-origin: top center;
}

.bottom3 {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(92deg) translateY(109px);
  transform-origin: bottom center;
}

.front3 {
  text-align: center;
  color: rgb(173, 222, 247);
  opacity: 0.50;
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(99px);
}

.change-color {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

.change-color:hover,
.change-color:focus,
.change-color:active {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

Ответ №1:

Я никогда раньше не работал над преобразованиями, но я попробовал,

Посмотрев на ваш css, я подумал .wrap , что класс должен иметь атрибуты left , и position поэтому добавил эти атрибуты и удалил left атрибут из .cube div

Я изменил ваш код

 .wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
}

.cube3 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 999px;
  width: 200px;
  height: 200px;
}

Для

 .wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
  position: absolute; // added position and left
  left: 999px;
}

.cube3 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute; // kept the position of its child tags, but removed left attribute
  width: 200px;
  height: 200px;
}

Updated:

Для исправления сумасшедшего вращения измените приведенный ниже код

здесь вы не упомянули 0% времени, что должна делать анимация, поэтому она сходит с ума, достигнув 5% времени (0,5 секунды), она начала вращаться на 360 по оси y

 @keyframes spin {
  5% {
    transform: rotateY(360deg);
  }
}

Для

 @keyframes spin {
      0% {
        transform: rotateY(360deg);
      }
    }

Я меняю значение на 0%, поэтому от начала до конца он будет вращаться на 360 градусов по оси y.

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

 @red: rgb(131, 168, 226);
@size: 100px;
body {
  background-color: #dff;
}

header {
  text-align: center;
}

h1 {
  text-align: center;
  padding: 9px;
}



.wrap {
  perspective: 1000px;
  perspective-origin: 46% 70px;
  left: 100px;
  position: absolute;
}

.wrap2 {
  perspective: 1000px;
  perspective-origin: 40% 70px;
  position: absolute;
  left: 500px;
}

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
  position: absolute;
  left: 999px;
}

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  width: 200px;
  height: 200px;
}
.cube:hover {
  animation-play-state: running;
}

@keyframes spin {
  0% {
    transform: rotateY(360deg);
  }
}

.back {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-270deg) translateX(87px);
  transform-origin: top right;
}

.left {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-109px);
  transform-origin: top center;
}

.bottom {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(90deg) translateY(109px);
  transform-origin: bottom center;
}

.front {
  text-align: center;
  color: rgb(173, 222, 247);
  opacity: 0.50;
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(109px);
}

.change-color {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

.change-color:hover,
.change-color:focus,
.change-color:active {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

пример

1. Спасибо за ваш ответ. Ваш ответ определенно помогает, но кубы по-прежнему не остаются на месте, хотя с вашим методом это намного лучше. Кроме того, я не знаю, почему при первом наведении курсора мыши на куб анимация становится сумасшедшей и очень быстрой..

2. * Исправление… Средний куб не остается на месте.. Он слегка смещается слева направо..

3. Потрясающе! Спасибо за ваш подробный ответ.

Метки: Проблемы с анимацией CSS

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Flutter FCM не запускает onBackgroundMessage

Поддерживает ли Cassandra PITR (восстановление на определенный момент времени)?

Использование ggplot2 stat_summary с помощью geom col для создания отдельной строки суммы