Менять свойство transform: rotate через JS

120

12 января 2020, 15:50

Изначальная задача у меня это менять по кругу цветные квадраты. Думаю это сделать меняя свойство 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 вообще?

Answer 1

Вот так можно при помощи js:

document.querySelector('.egg').onclick = function () { 
  this.style.transform = `rotate(${this.d = (this.d | 0) + 90}deg)`; 
}

.egg { 
  width: 40px; height: 40px; 
  display: flex; flex-wrap: wrap; margin: auto;  
  transition: 300ms; 
} 
.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>

если анимация не нужна уберите transition: 300ms;

Если прямо очень хочется именно получать значение из стиля, то код будет слегка посложнее

document.querySelector('.egg').onclick = function () { 
  var m = window.getComputedStyle(this).transform.split('(').pop().split(','); 
  var a = 180/Math.PI * Math.atan2(m[1], m[0]) + 90; 
  this.style.transform = `rotate(${a}deg)`; 
}

.egg { 
  width: 40px; height: 40px; 
  display: flex; flex-wrap: wrap; margin: auto;  
  transform: rotate(11deg); 
} 
.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>

тут приходится получать значения угла из матрицы трансформации, которую возвращает window.getComputedStyle