Пусть ваш родительский элемент будет направляющим;
Когда цель состоит в том, чтобы вращаться на одинаковом расстоянии вокруг центра (в противоположность, скажем, «эллиптической орбите», которая больше напоминает овальную форму), чемСамый простой способ - предоставить родителю установить согласованную границу и присоединить к нему дочерние элементы, чтобы использовать его положение в качестве пути анимации. Цель состоит в том, чтобы просто создать иллюзию отдельных элементов, движущихся синхронно, когда на самом деле вращается только один элемент, центр которого по умолчанию transform-origin
выступает в качестве ориентира для детей, «вращающихся» внутри него.
В нашемВ этом случае мы взяли родителя с равной окружностью, примерно равной размеру «желаемой орбиты», и мы дали ему border-radius
50% для создания круга. Это не делает точку на элементе меньше или дальше от другого. Мы делаем его элементом position: relative
, чтобы мы могли применять position: absolute
к любым его дочерним элементам. В этом примере мы используем псевдоэлементы, но они также могут легко быть дополнительными элементами узла DOM, такими как div.
За счет привязки наших дочерних элементов к определенным точкам на родительском элементе мы создаем равное расстояние от X / Y родительского элемента. transform-origin
центр, который мы желаем, и применяем rotate
transform
, чтобы раскрутить родителя. Однако, если бы мы только сделали это, то потомки также пошли бы по этому пути и не держали бы вертикаль (как предполагается, желательно), поэтому мы просто повторно используем ту же анимацию, примененную к родителю, но в reverse
, чтобы сместить его вращение. В результате родительский элемент вращается в одном направлении, а дочерние - в другом, чтобы создать эффект, видимый в примере. Надеюсь, это поможет!
#rotator {
position: relative;
width: 7rem;
height: 7rem;
animation: rotations 6s linear infinite;
border: 1px orange dashed;
border-radius: 50%;
margin: 3rem;
}
#rotator:before, #rotator:after {
position: absolute;
content: '';
display: block;
height: 3rem;
width: 3rem;
animation: inherit;
animation-direction: reverse;
}
#rotator:before {
background-color: red;
top: -.25rem;
left: -.25rem;
}
#rotator:after {
background-color: green;
bottom: -.25rem;
right: -.25rem;
}
@keyframes rotations {
to { transform: rotate(360deg) }
}
<div id="rotator"></div>