Как вариант:
<html>
<head>
<title></title>
<script>
function setElementStyle(element, property, value) {
var prefixes = {'webkit':1, 'moz':1, 'ms':1, 'o':1};
if (element.style[property] !== undefined) {
element.style[property] = value;
return;
}
property = property.charAt(0).toUpperCase() + property.substring(1);
for (var prefix in prefixes) {
if (element.style[prefix + property] !== undefined) {
element.style[prefix + property] = value;
break;
}
}
}
function rotate() {
var src = document.getElementById('rotate');
setElementStyle(src, 'transition', "all 1s");
setElementStyle(src, 'transform', "rotate(360deg)");
setTimeout(function(){
setElementStyle(src, 'transition', "");
setElementStyle(src, 'transform', "");
}, 1000);
}
</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>
Но это не очень хороший вариант. Вообще, если кода писать много - лучше использовать готовую библиотеку, а не велосипедить.