Блог

Главная - Вопросы по программированию - Я не могу разместить div в CSS без того, чтобы он не испортил анимацию

Я не могу разместить div в CSS без того, чтобы он не испортил анимацию

#html #css #css-animations

Вопрос:

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

 `@keyframes squarestuff {
  50% {
    transform: rotate(180deg);
    width: 5rem;
    border-radius: 50%;
  }`

Ответ №1:

попробуйте добавить это

 @keyframes squarestuff {
  50% {
    transform: rotate(180deg);
    width: 5rem;
    border-radius: 50%;
    transform-origin:center center;
  }

Так как он преобразует центр и вращается вокруг нового центра.
сделайте так, чтобы ширина div содержала квадрат как ширину квадрата, если все еще есть проблема

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

1. Пожалуйста, нажмите «галочку», чтобы убедиться в правильности ответа.. Спасибо

Ответ №2:

Вот оно: https://jsfiddle.net/0pz1tv7q/

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

div {
  height: 100px;
  width: 100px;
  border: 5px solid black;
  background: red;
  position: absolute;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

@keyframes mymove {
    100% {
    transform: rotate(180deg);
    width: 25%;
    border-radius: 50%;
  }
}
</style>
</head>
<body>

<h2>Square CSS</h2>
<div></div>

</body>
</html>

Ответ №3:

Предполагая, что вы хотите, чтобы центр овала оставался в центре «квадрата» (т. е. не двигался), вы можете использовать масштаб преобразования вместо изменения ширины.

Этот фрагмент поворачивает квадрат с центром всегда в одном и том же месте и добавляет овал в качестве псевдоэлемента, чтобы вы видели, что происходит и что центр не перемещается:

 div {
  width: 10rem;
  height: 10rem;
  background-color: magenta;
  animation: squarestuff 5s linear infinite;
  transform-origin: center center;
  position: relative;
}

@keyframes squarestuff {
  50% {
    transform: rotate(180deg);
  }
}

div::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1, 1);
  background: blue;
  width: 10rem;
  height: 10rem;
  animation: square2oval 5s linear infinite;
  z-index: 1;
  display: inline-block;
}

@keyframes square2oval {
  50% {
    transform: translate(-50%, -50%) scale(0.5, 1);
    border-radius: 50%;
  }
} 
 <div></div>
Метки: ,