Angular 4 - повернуть изображение с шагом 45 градусов - PullRequest
Новая
       47

Angular 4 - повернуть изображение с шагом 45 градусов

0 голосов
/ 14 мая 2018

У меня есть изображение и две кнопки, которые должны повернуть это изображение на 45 или -45 градусов. 

<div>
    <img src="/assets/img1.png">
</div>
<div>
    <button type="submit">rotate left 45</button>
    <button type="submit">rotate right 45</button>
</div>

Как я могу сделать функцию, которая будет применять поворот css transtate к этому изображению?Шаги должны быть в 45 градусов по эфиру, и они должны постоянно вращаться независимо от того, сколько раз пользователь нажимает кнопку.

1 Ответ

0 голосов
/ 14 мая 2018

Вы можете обновить свойство CSS transform элементов при клике. 

let rotationAmount = 0;

function rotateImage(direction) {
  rotationAmount += direction == 'left' ? -45 : 45;
  
  document.querySelector('#image').style.transform = `rotate(${rotationAmount}deg)`;
}
#image {
  height: 100px;
  width: 100px;
}

.button-wrapper {
  margin-top: 30px;
}
<div>
    <img id="image" src="">
</div>
<div class="button-wrapper">
    <button type="submit" onclick="rotateImage('left')">rotate left 45</button>
    <button type="submit" onclick="rotateImage('right')">rotate right 45</button>
</div>
...