Step48_rus,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
img {
transition: all .8s ease-out;
}
</style>
</head>
<body>
<a href="#1"><img src="http://demo.mir-360.ru/sov_trad/wp-content/uploads/2016/08/krutilka.png"></a>
<script>
window.addEventListener('DOMContentLoaded', function() {
var a = document.querySelector('[href="#1"]'), l = 4,i = 0,
img = a.querySelector('img');
a.addEventListener('click', function create() {
a.setAttribute('href', '#'+ (++i% l + 1));
img.style.transform = 'rotate('+(90*i)+'deg)'
});
});
</script>
</body>
</html>