css3 – transform – rotate

Mit der Eigenschaft transform und dem Wert – rotate(mit Gradangabe) kann man ein Blockelement im Uhrzeigersinn (gradweise) drehen, Minuswerte ergeben eine Drehung gegen den Uhrzeigersinn. Eigentlich brauchte ich das bis heute (noch) nicht, aber es ist nun machbar.

CSS3.de Nachrichten, Information, Übungen und Beispiele zum Thema CSS3
CSS3.de Nachrichten, Information, Übungen und Beispiele zum Thema CSS3

 
 
 

<style>
<!--
div #css3transformrotate1, div #css3transformrotate {
width: 220px;
height: 120px;
border: 1px solid black;
font-size: 14px;
color: white;
background: red;
padding: 10px;
margin: 20px;
}
div #css3transformrotate {
background: blue;
transform: rotate(20deg);
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari, Chrome */
-moz-transform: rotate(20deg); /* Firefox */
-o-transform: rotate(20deg); /* Opera */
}
--></style>
<div id="css3transformrotate1"><strong>CSS3.de</strong> <span>Nachrichten, Information, Übungen und Beispiele zum Thema CSS3</span></div> 
<div id="css3transformrotate"><strong>CSS3.de</strong> <span>Nachrichten, Information, Übungen und Beispiele zum Thema CSS3</span></div>