Можно вращать с помощью canvas (вот так) и с помощью css3
<script>
window.onload = function() {
// получаем картинку
var image = document.getElementById("img");
//создаем переменную под новую картинку
img = new Image()
// url картинки
img.src = image.src;
// получаем canvas элемент
var canvas = document.getElementById("rotate");
// устанавливем размеры canvas элемента исходя из размеров самого изображения
canvas.width = image.width;
canvas.height = image.height;
// создаем переменную для работы с canvas
img.context = canvas.getContext("2d");
img.canvas = canvas;
img.radians = Math.PI/180;
//
img.onload = function() {
var _this = this;
var _angle = 0;
// устанавливаем таймер
var timer = setInterval(function() {
// очищаем canvas
_this.context.clearRect(0,0,_this.width, _this.height);
// поварачиваем картинку и рисуем ее
canvas_rotate.call(_this, _angle);
_angle +=10;
}, 50);
}
}
function canvas_rotate(rotate) {
// save the current co-ordinate system
// before we screw with it
this.context.save();
// move to the middle of where we want to draw our image
this.context.translate(this.width/2, this.height/2);
// rotate around that point, converting our
// angle from degrees to radians
this.context.rotate(rotate * this.radians);
// draw it up and to the left by half the width
// and height of the image
this.context.drawImage(this, -(this.width/2), -(this.height/2));
// and restore the co-ords to how they were when we began
this.context.restore();
}
</script>
<img src='http://tsigelization.narod.ru/arrow.png' id='img'>- картинка, которую будем вращать вокруг своей оси
<br><br>
<canvas id='rotate'></canvas>
Есть ли ещё способы вращать объекты/картинки не используя 2 вышеперечисленных метода?
