Блог

Главная - Вопросы по программированию - Поворот элемента вокруг другого элемента — css

Поворот элемента вокруг другого элемента — css

#html #css #spinning

#HTML #css #вращение

Вопрос:

Я работаю с CSS и хочу создать эффект, при котором объект перемещается вокруг другого объекта по эллипсу. Я не использую холст, и это мой html:

 <div>/*Content intended for ellipse movement*/</div>
<div>/*Element to ellipse around*/</div>

В настоящее время у меня нет никакого css
Как мне это сделать? Спасибо за вашу помощь!

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

1. Возможно, попробуйте сделать второй div дочерним элементом с абсолютной позицией относительно оси вращения (первой div ). И повернуть первый div ?

2. Пожалуйста, добавьте также свой CSS.

Ответ №1:

Вы пытаетесь сделать что-то подобное?

 body {
  padding: 50px;
}

div {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #9f9;
}

.high {
  background-color: #99f;
  z-index: 1;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
} 
 <div class="low"></div>
<div class="high"></div>
Метки: