Javascript-форум - Показать сообщение отдельно

(Sandr) · #1 (**permalink**) 27.01.2013, 00:57

Приветствую всех.

Есть код

<html>
      <head>
        <title></title>
        <script>
          function rotate() {
            var src = document.getElementById('rotate');
            src.MozTransition = "all 1s";
            src.WebkitTransition = "all 1s";
            src.OTransition = "all 1s";
            src.MsTransition = "all 1s";
            src.Transition = "all 1s";
            
            src.MozTransform = "rotate(360deg)";
            src.WebkitTransform = "rotate(360deg)";
            src.OTransform = "rotate(360deg)";
            src.MsTransform = "rotate(360deg)";
            src.Transform = "rotate(360deg)";
          }
    
        </script>
      </head>
      <body>
        <div id="rotate" style="background-color:black; color:white; width:300px; height:200px">
          TEXT_TEXT_TEXT
        </div>
        <a onclick="rotate(); return false;">Click</a>
      </body>
    </html>

Тут видно, что после нажатия на ссылку, запускается функция rotate() и див с текстом поворачивается.
Проблема в том, что если нажать ещё раз, то див больше не повернётся.

Подскажите, как это можно исправить?

И ещё вопрос, как можно сократить эту часть кода?

src.MozTransition = "all 1s";
src.WebkitTransition = "all 1s";
src.OTransition = "all 1s";
src.MsTransition = "all 1s";
src.Transition = "all 1s";

src.MozTransform = "rotate(360deg)";
src.WebkitTransform = "rotate(360deg)";
src.OTransform = "rotate(360deg)";
src.MsTransform = "rotate(360deg)";
src.Transform = "rotate(360deg)";