Изначальная задача у меня это менять по кругу цветные квадраты. Думаю это сделать меняя свойство transform: rotate у большого квадрата.
.egg {
width: 40px;
height: 40px;
display: flex;
flex-wrap: wrap;
margin: auto;
transform: rotate(0deg);
}
.egg-item {
width: 20px;
height: 20px;
}
.egg-item-1 {
background-color: rebeccapurple;
}
.egg-item-2 {
background-color: red;
}
.egg-item-3 {
background-color: green;
}
.egg-item-4 {
background-color: blue;
}
<div class="egg">
<div class="egg-item egg-item-1"></div>
<div class="egg-item egg-item-2"></div>
<div class="egg-item egg-item-3"></div>
<div class="egg-item egg-item-4"></div>
</div>
Сначала попробовал сделать через бесконечную анимацию css. Но так не получается, т.к. квадрат постоянно возвращается в положение from.
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(90deg);}
}
И вот думаю как это решить с помощью JS. По сути мне нужно написать функцию которая берёт значение rotate(0deg) и к нему прибавлять + 90 deg. Но как получить значение не могу разобраться. Подскажите как получать это значение?
Или можно обойтись без js вообще?
rotate
? – ThisMan 7 апр '19 в 12:27