Изображение можно вращать с помощью Javascript, динамически изменяя его свойство CSS transform. Точка, где вокруг которой должно происходить вращение, может быть указана с помощью свойства transform-origin.
Поворот изображения с помощью Javascript может произойти путем изменения его свойства CSS- преобразования и использования функции преобразования rotate.
Установка:
HTML
Код
<div id="demo-container">
<img src="https://usefulangle.com/img/thumb/javascript-logo.svg" id="sample" style="transform: rotate(990deg);">
<button id="sabimage-tateanging">Поворот на 90 градусов</button>
</div>
CSS
Код
#sabimage-tateanging {
border: 1px solid #513bdc;
color: #5426de;
padding: 5px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
background-color: white;
outline: none;
}
JS
Код
var current_rotation = 0;
document.querySelector("#rotate-button").addEventListener('click', function() {
current_rotation += 90;
document.querySelector("#sample").style.transform = 'rotate(' + current_rotation + 'deg)';
});
Демонстрация
Показ вращения как анимация
Выполненное вращение может быть показано как анимация с помощью свойства перехода CSS или свойства анимации (для более конкретной анимации).
Код
/* apply transition on the translate property */
#sample {
transition: transform 0.3s;
}
Указание точки вращения
По умолчанию вращение происходит вокруг центральной точки элемента. Чтобы повернуть изображение относительно какой-либо другой точки, необходимо изменить свойство CSS transform-origin.
Код
/* by default transform origin is set to (50% 50%) which is the center position */
/* set transform origin to the top-left corner */
#sample {
transform-origin: 0% 0%;
}
/* set transform origin to the bottom-right corner */
#sample {
transform-origin: 100% 100%;
}
/* set transform origin to the bottom-left corner */
#sample {
transform-origin: 0% 100%;
}
