Всем привет, нужен скрипт для вращения фото на 360 градусов, зацикленно. Вот это фото надо вращать постоянно, ну чтобы оно крутилось по часовой стрелке https://forumstatic.ru/files/001b/d8/65/75674.png
Вращение фото
Сообщений 1 страница 10 из 19
Поделиться220.09.23 22:17
- технозомби
- Уважение: +9818
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
Тони
Код:
<img src="https://forumstatic.ru/files/001b/d8/65/75674.png">
<style>
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
img.rotation {animation: 3s linear infinite rotate;}
</style>Поделиться320.09.23 22:25
- Заблокирован
- Уважение: +75
- Наградные баллы: 46
#p188095,Gerda написал(а):
Тони
Код:<img src="https://forumstatic.ru/files/001b/d8/65/75674.png"> <style> @keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } img.rotation {animation: 3s linear infinite rotate;} </style>
#p188095,Gerda написал(а):
Тони
Код:<img src="https://forumstatic.ru/files/001b/d8/65/75674.png"> <style> @keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } img.rotation {animation: 3s linear infinite rotate;} </style>
Спасибо я уже поставил другой код. Вот такой -
Код:
<!-- Вращение Гунгнира-->
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 0px solid gray;position:absolute ; z-index: 1; left: 450px; top: 190px }
</style>
</head>
<body>
<canvas id="my-canvas" width="450" height="450"></canvas>
<script>
var RADIAN = Math.PI / 1800;
function toRadians(degrees) {
return degrees * RADIAN;
}
// Draws image in indicated position rotated around origin point (originX, originY).
// Hint: when we want to rotate around image center point, origin point should be:
// originX = imageX + image.width / 2;
// originY = imageY + image.height / 2;
//
function drawRotated$1(context, image, imageX, imageY, originX, originY, degrees) {
var radians = toRadians(degrees);
context.save(); // saves current transformation matrix (state)
context.translate(+originX, +originY);
context.rotate(radians); // rotates the image around origin point by used translations
context.translate(-originX, -originY);
context.drawImage(image, imageX, imageY); // draws the image in the position (imageX, imageY)
context.restore(); // restores saved transformation matrix (state)
}
// Draws image in indicated position rotated around relative origin point (originX, originY).
// Origin point is measured from let-top image corner.
// Hint: when we want to rotate around image center point, origin point should be:
// originX = image.width / 2;
// originY = image.height / 2;
//
function drawRotated$2(context, image, imageX, imageY, originX, originY, degrees) {
drawRotated$1(context, image, imageX, imageY, imageX + originX, imageY + originY, degrees);
}
// Draws image in indicated position rotated around image center.
//
function drawRotated$3(context, image, imageX, imageY, degrees) {
// we rotate image around image center (0.5 * image.width, 0.5 * image.height)
var originX = 0.5 * image.width;
var originY = 0.5 * image.height;
drawRotated$2(context, image, imageX, imageY, originX, originY, degrees);
}
// Usage example:
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
var degrees = 0;
var callback = function () {
context.clearRect(0, 0, canvas.width, canvas.height);
// image placed in point (20, 20) and rotated around his center
drawRotated$3(context, image, 0, 0, degrees);
degrees += 1;
};
setInterval(callback, 10);
};
image.src = 'http://forumstatic.ru/files/001b/d8/65/75674.png';
</script>
</body>
</html>
<!-- Окончание -->Поделиться521.09.23 01:56
- технозомби
- Уважение: +9818
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
#p188096,Тони написал(а):
<!doctype html>
<html>
<head>
тебе такие коды не нужны - в коде форума они уже есть
#p188096,Тони написал(а):
<script>
скрипт - это всегда хуже, чем css
#p188096,Тони написал(а):
position:absolute ; z-index: 1; left: 450px; top: 190px
ты уже заметил, что любые элементы форума под этой штукой стали не кликабельны?
Поделиться621.09.23 10:11
- Заблокирован
- Уважение: +75
- Наградные баллы: 46
#p188095,Gerda написал(а):
Тони
Код:<img src="https://forumstatic.ru/files/001b/d8/65/75674.png"> <style> @keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } img.rotation {animation: 3s linear infinite rotate;} </style>
Герда, твой код не вращает картинку. Хорошо бы это исправить! Куда его вставлять чтобы он работал нормально?
Отредактировано Тони (21.09.23 10:12)
Поделиться721.09.23 10:19
- Заблокирован
- Уважение: +75
- Наградные баллы: 46
К твоему коду, Герда, хорошо бы добавить позиционирование.
Отредактировано Тони (21.09.23 10:21)
Поделиться821.09.23 11:24
- Заблокирован
- Уважение: +75
- Наградные баллы: 46
,Gerda" написал(а):
#p188096,Тони написал(а):position:absolute ; z-index: 1; left: 450px; top: 190px
ты уже заметил, что любые элементы форума под этой штукой стали не кликабельны?
Да Это я сразу заметил)))).Поэтому нужно эту вращающуюся картинку поместить на задний фон и чтобы форумные таблицы, надписи стали кликабельными?
Отредактировано Тони (21.09.23 11:46)
Поделиться921.09.23 14:12
- технозомби
- Уважение: +9818
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
#p188101,Тони написал(а):
Герда, твой код не вращает картинку.
забыла класс в картинку добавить. от так будет работать:
Код:
<style>
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.rotation {animation: 3s linear infinite rotate;}
</style>
<img class="rotation" src="https://forumstatic.ru/files/001b/d8/65/75674.png">[html]<style>
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.rotation {animation: 3s linear infinite rotate;}
</style>
<img class="rotation" src="https://forumstatic.ru/files/001b/d8/65/75674.png">[/html]
#p188103,Тони написал(а):
К твоему коду, Герда, хорошо бы добавить позиционирование.
#p188104,Тони написал(а):
.Поэтому нужно эту вращающуюся картинку поместить на задний фон и чтобы форумные таблицы, надписи стали кликабельными?
вот для этого давай ссылку на форум и объясни, где конкретно она должна позиционироваться
Поделиться1021.09.23 14:40
- Заблокирован
- Уважение: +75
- Наградные баллы: 46
#p188107,Gerda написал(а):
#p188101,Тони написал(а):Герда, твой код не вращает картинку.
забыла класс в картинку добавить. от так будет работать:
Код:<style> @keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .rotation {animation: 3s linear infinite rotate;} </style> <img class="rotation" src="https://forumstatic.ru/files/001b/d8/65/75674.png">#p188103,Тони написал(а):К твоему коду, Герда, хорошо бы добавить позиционирование.
#p188104,Тони написал(а):.Поэтому нужно эту вращающуюся картинку поместить на задний фон и чтобы форумные таблицы, надписи стали кликабельными?
вот для этого давай ссылку на форум и объясни, где конкретно она должна позиционироваться
Это мой форум - http://alfedr.mybb.ru/
Картинку нужно поставить на фоновое изображение в центре рунного круга там где красный Валькнут(Три треугольника соединенные вместе) как то так)
