Beispiel:CSS3 transform-origin.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" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>transform-origin</title>
<style>
@keyframes orbit {
from {
rotate: 0;
}
to {
rotate: 360deg;
}
}
#rotate2 aside {
background: #dfac20;
transform-origin: 0 0;
}
#rotate2 .zentrum {
left: 2px;
top: -12px;
}
#rotate3 aside {
background: #93b946;
transform-origin: center 100%;
}
section {
border: thin solid gainsboro;
float: left;
height: 19em;
margin-right: .5em;
padding: .5em;
position: relative;
width: 12em;
}
/* Grundeinstellungen der Elemente */
section:after,
aside {
position: absolute;
top: 0;
left: 0;
}
p.zentrum,
p.zentrum:before {
position: absolute;
}
/* Dreh- und Angelpunkt */
.zentrum:before {
background: black;
border-radius: 50%;
content: " ";
height: 6px;
left: -5px;
top: -5px;
width: 6px;
}
aside {
height: 100px;
width: 100px;
animation: orbit 4s linear infinite;
opacity: 0.8;
border: thin solid;
}
#rotate aside {
background: #c82f04;
}
#rotate .zentrum {
left: 50px;
top: 35px;
}
#rotate3 .zentrum {
left: 50px;
top: 85px;
}
section h2 {
height: 2em;
margin-top: 130px;
}
</style>
</head>
<body>
<h1>Verwendung von <code>transform-origin</code></h1>
<h2>Drehen mit Dreh- und Angelpunkten</h2>
<section id="rotate">
<h2>Zentrum nicht festgelegt</h2>
<aside></aside>
<p class="zentrum">Zentrum</p>
<p>CSS:</p> <code>transform-origin: 50% 50%;</code><br>(Default-Wert)</p>
</section>
<section id="rotate2">
<h2>Zentrum links oben</h2>
<aside></aside>
<p class="zentrum">Zentrum</p>
<p>CSS:</p>
<code>transform-origin: 0 0;</code>
</section>
<section id="rotate3">
<h2>Zentrum mitte unten</h2>
<aside></aside>
<p class="zentrum">Zentrum</p>
<p>CSS:</p>
<code>transform-origin: center 100%;</code>
</section>
</body>
</html>
