• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Вращение изображения с помощью Javascript (Создать динамическое вращение картинки на Javascript)
Вращение изображения с помощью Javascript
Kosten
Дата: Понедельник, 2020-01-27, 00:11 | Сообщение 1
Оффлайн
Администраторы
Сообщений:28853
Награды: 62


Изображение можно вращать с помощью 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%;
}
Прикрепления: 7034490.png(5.5 Kb) · rotating.zip(3.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Вращение изображения с помощью Javascript (Создать динамическое вращение картинки на Javascript)
  • Страница 1 из 1
  • 1
Поиск: