Beispiel:CSS3 transform-rotate2.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>Kreisen und Pendeln mit rotate()</title>
<style>
#orbit aside {
top: 0;
left: 0;
background: #337599;
transform-origin: 100px 100px;
animation: orbit 4s linear infinite;
}
@keyframes orbit {
from {
rotate: 0;
}
to {
rotate: 1turn;
}
}
#pendel aside {
top: 200px;
left: 125px;
background: #c82f04;
transform-origin: center -100px;
rotate: 60deg;
animation: pendel 2s infinite alternate ease-in-out;
}
@keyframes pendel {
to {
rotate: -60deg;
}
}
section {
border: thin solid gainsboro;
display:inline-block;
height: 20em;
margin-right: 1em;
padding: .5em;
position: relative;
width: 280px;
}
/* Grundeinstellungen der Elemente */
section:after,
aside,
.zentrum,
.zentrum:before {
border-radius: 50%;
content: " ";
position: absolute;
}
/* Zentrum (Dreh- und Angelpunkt) */
.zentrum:before {
background: black;
height: 6px;
left: -5px;
top: -5px;
width: 6px;
}
aside {
height: 50px;
width: 50px;
opacity:0.8;
}
/* Umrisse des Elements an der Originalposition */
section:after {
width: 48px;
height: 48px;
background: #f2dea6;
border: thin dotted #dfac20;
z-index: -1;
}
section h2 {
margin-top:250px;
}
#orbit p {
top: 85px;
left: 100px;
}
/* Originalposition */
#orbit:after {
top: 0px;
left: 0px;
}
#pendel p {
top: -15px;
left: 150px;
}
/* Originalposition */
#pendel:after {
top: 200px;
left: 125px;
transform-origin: center -100px;
rotate: 60deg;
}
</style>
</head>
<body>
<h1>Kreisen und Pendeln mit <code>rotate()</code></h1>
<section id="orbit">
<h2>Kreisen</h2>
<aside></aside>
<p class="zentrum">Zentrum</p>
</section>
<section id="pendel">
<h2>Pendel</h2>
<aside></aside>
<p class="zentrum">Zentrum</p>
</section>
</body>
</html>
