Beispiel:CSS3 transform-rotate1.html

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" > <title>transform: rotate()</title> <style> section { background: white; height: 80vh; margin: 2em auto; max-width: 50em; position: relative; } .csi { background: #ebe22f; color: black; font: small-caps bold 1.5em/150% Arial, sans-serif; margin-top: 4em; padding: 0; transform: rotate(350deg); }

.richtung{ position: absolute; font-size: 300%; }

.oben{ right: 40%; top: 0; }

.rechts{ right: 0; top: 40%; transform: rotate(90deg); }

.unten{ right: 40%; bottom: 0; transform: rotate(180deg); }

.links{ left: 0%; top: 40%; transform: rotate(270deg); } </style> </head> <body>

Drehung mit transform: rotate()

<section>

Wohin ist das Bild verschwunden?

      police line - do not cross       police line - do not cross

nach oben?

nach rechts?

nach unten?

nach links?

</section>

</body> </html>