Beispiel:CSS3 transform-rotate1.html
Aus SELFHTML-Wiki
<!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:SELFHTML-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 auto;
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>
<h1>Drehung mit <code>transform: rotate()</code></h1>
<section>
<h2>Wohin ist das Bild verschwunden?</h2>
<p class="csi"> police line - do not cross police line - do not cross </p>
<p class="richtung oben">nach oben?</p>
<p class="richtung rechts">nach rechts?</p>
<p class="richtung unten">nach unten?</p>
<p class="richtung links">nach links?</p>
</section>
</body>
</html>
