Вращение div

@revaldo666 · Регистрация: 18.07.2010

Author24 — интернет-сервис помощи студентам

Всем доброго времени суток.
У меня есть событие которое считывает нажатие клавиш, при нажатии стрелки вправо, влево, значение переменной(угла) увеличивается и уменьшается, собственно в диве на задний фон залита картинка, подскажите как сделать чтобы с изменением значения переменной угла крутилась и сама картинка?

@Simen1111 · 22.05.2012, 01:57

Можно попробовать задать им один класс и присвоить соответствующие значения на css вот ссылка:
http://shpargalkablog.ru/2011/03/css-povorot.html

@~~Notortep~~ · 22.05.2012, 02:14

в рыбном отделе - https://www.cyberforum.ru/javascript-jquery/ - спросите про плагин rotate

@revaldo666 · 22.05.2012, 02:30 **[ТС]**

Сообщение от Simen1111

Можно попробовать задать им один класс и присвоить соответствующие значения на css вот ссылка:
http://shpargalkablog.ru/2011/03/css-povorot.html

на CSS пробовал задавать, всё работает, однако нужно чтобы поворот происходил по нажатию клавиш, но JS не воспринимает эти стили

CSS

 -webkit-transform: rotate(-90deg); /* Chrome y Safari */
-moz-transform: rotate(-90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
-o-transform: rotate(-90deg); /* Opera */

ну или я что-то не так делаю.
для проверки делал так:

Javascript

var obj=document.getElementById('player');
function rotate()
{
obj.style.webkitTransform:rotate(360deg) scale(1);
obj.style.MozTransform: rotate(360deg) scale(1);
 obj.style.oTransform: rotate(360deg) scale(1);
}

функцию прилепил на событие onmousemove однако ничего не происходит.
ПС:Реализовать это надо только на JS без использования JQuery

@Simen1111 · 22.05.2012, 02:53

в том то и дело jquery позволяет работать со стилями его и нужно использовать!
http://ruseller.com/lessons.php?rub=32&id=1430

@~~Notortep~~ · 22.05.2012, 04:09

Javascript

function rotate (obj, gradus)
{
if (navigator.userAgent.indexOf ('Webkit') != -1)  obj.setAttribute ('style', '-webkit-transform: rotate(' + gradus + 'deg)');
if (navigator.userAgent.indexOf ('Firefox') != -1) obj.setAttribute ('style', '-moz-transform: rotate(' + gradus + 'deg)');
if (navigator.userAgent.indexOf ('Opera') != -1)   obj.setAttribute ('style', '-o-transform: rotate(' + gradus + 'deg)');
}

для msie записывается проще:

Javascript

1	obj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=?????????????)';

однако, произвольный градус поворота там прописать нельзя:
у rotation всего 4 положения - http://msdn.microsoft.com/en-u... 85%29.aspx
---

посмотрите реализацию - http://raphaeljs.com/image-rotation.html - там без JQuery

@revaldo666 · 22.05.2012, 10:14 **[ТС]**

Большое спасибо

Добавлено через 1 час 11 минут

Сообщение от Notortep

Javascript

function rotate (obj, gradus)
{
if (navigator.userAgent.indexOf ('Webkit') != -1)  obj.setAttribute ('style', '-webkit-transform: rotate(' + gradus + 'deg)');
if (navigator.userAgent.indexOf ('Firefox') != -1) obj.setAttribute ('style', '-moz-transform: rotate(' + gradus + 'deg)');
if (navigator.userAgent.indexOf ('Opera') != -1)   obj.setAttribute ('style', '-o-transform: rotate(' + gradus + 'deg)');
}

для msie записывается проще:

Javascript

1	obj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=?????????????)';

однако, произвольный градус поворота там прописать нельзя:
у rotation всего 4 положения - http://msdn.microsoft.com/en-u... 85%29.aspx
---

посмотрите реализацию - http://raphaeljs.com/image-rotation.html - там без JQuery

кстати, посмотрел тот скрипт raphael сделал так

Javascript

 var src = document.getElementById("bee").src,
     angle = 0;
     document.getElementById("holder").innerHTML = "";
var R = Raphael("holder", 640, 480);
               R.circle(320, 240, 200).attr({fill: "#000", "fill-opacity": .5, "stroke-width": 5});
                var img = R.image(src, 160, 120, 320, 240);
   function cont()
   {
  
    if(event.keyCode==39)
    {
        angle+=10;
        img.animate({transform: "r" + angle}, 1000, "<>");
    }
    if(event.keyCode==37)
    {
        angle-=10;
        img.animate({transform: "r" + angle}, 1000, "<>");
    }
   
   }

однако вращение не происходит, где я ошибся?

@revaldo666 10 / 10 / 3 Регистрация: 18.07.2010 Сообщений: 180
		1
	Вращение div 22.05.2012, 01:33. Показов 6274. Ответов 6 Метки нет (Все метки) Всем доброго времени суток. У меня есть событие которое считывает нажатие клавиш, при нажатии стрелки вправо, влево, значение переменной(угла) увеличивается и уменьшается, собственно в диве на задний фон залита картинка, подскажите как сделать чтобы с изменением значения переменной угла крутилась и сама картинка? 0

@Simen1111 6 / 6 / 1 Регистрация: 19.05.2012 Сообщений: 28
	22.05.2012, 01:57	2
	Можно попробовать задать им один класс и присвоить соответствующие значения на css вот ссылка: http://shpargalkablog.ru/2011/03/css-povorot.html 0

@~~Notortep~~ Заблокирован
	22.05.2012, 02:14	3
	в рыбном отделе - https://www.cyberforum.ru/javascript-jquery/ - спросите про плагин rotate 0

@Simen1111 6 / 6 / 1 Регистрация: 19.05.2012 Сообщений: 28
	22.05.2012, 02:53	5
	в том то и дело jquery позволяет работать со стилями его и нужно использовать! http://ruseller.com/lessons.php?rub=32&id=1430 0

	22.05.2012, 10:14