uloha:otaceni [Kroužek Javascriptu]

<html>
<head>
<style>
 #oblast{
 max-width:42em; padding:1em;background-color:#ccffcc;
 z-index:3;
 position:relative;
 
 }
 
 button{
 position:relative;
 z-index:5;
 }
 
</style>
 
</head>
 
 
<body>
 
<script>

var rotation=0; //hodnota otoceni
 
function rotateLeft(){
rotation--;                                                                 
document.getElementById("oblast").style.transform="rotate("+rotation+"deg)";
 
}
 
function rotateRight(){
rotation++;
document.getElementById("oblast").style.transform="rotate("+rotation+"deg)";
}

</script>
 
 
<div id="oblast">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas libero. Etiam commodo dui eget wisi. Quisque tincidunt scelerisque libero. In enim a arcu imperdiet malesuada. Phasellus et lorem id felis nonummy placerat. Praesent vitae arcu tempor neque lacinia pretium. Aenean fermentum risus id tortor. Etiam quis quam. In convallis. Mauris dictum facilisis augue. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Mauris dictum facilisis augue. Integer lacinia. Nulla quis diam.</p>
 
<p><img src="http://adasek.cz/menu/linux.png" style="float:left;margin:1em">Phasellus rhoncus. Sed ac dolor sit amet purus malesuada congue. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Phasellus rhoncus. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Mauris metus. Quisque porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc auctor. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent in mauris eu tortor porttitor accumsan. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est.</p>
 
<p>Etiam dictum tincidunt diam. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam in lorem sit amet leo accumsan lacinia. Curabitur sagittis hendrerit ante. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Nulla non lectus sed nisl molestie malesuada. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Integer vulputate sem a nibh rutrum consequat.</p>
 
</div>
 
<button onclick="rotateLeft()">&lt;</button>
<button onclick="rotateRight()">&gt;</button>
 
</body>
 
</html>