Beispiel:CSS3 transform-rotate3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
<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;
				border: 1px solid gainsboro;
				float: left;
				height: 300px;
				margin-right: 20px;
				padding: 10px;
				position: relative;
				width: 280px;
			}

			section:after {
				border: 1px dotted red;
				border-radius: 50%;
				content: " ";
				height: 48px;
				left: 0px;
				position: absolute;
				top: 50px;
				width: 48px;
			}

			section h2 {
				margin-top: 250px;
			}

			.zentrum {
				background: red;
				border-radius: 50%;
				height: 6px;
				left: 0px;
				position: absolute;
				top: 50px;
				width: 6px;
				animation: xAchse 6s ease-in-out 0s infinite;
			}

			@keyframes xAchse {
				0% { transform: translateX(0px); }
				50% { transform: translateX(150px); }
				100% { transform: translateX(0px); }
			}

			.moveY {
				border: 1px dotted #333;
				border-radius: 0px;
				height: 50px;
				position: absolute;
				top: 0px;
				width: 150px;
				animation: orbit 6s linear 0s infinite;
			}

			.ellipse {
				background: blue;
				border-radius: 50%;
				height: 50px;
				left: 0px;
				position: absolute;
				top: 0px;
				width: 50px;
			}

			@keyframes orbit {
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
			}
		</style>
	</head>
<body>
	<h1>Verwendung von <code>transform: rotate()</code></h1>

	<h2>Kreisen in einer elliptischen Umlaufbahn</h2>
	<section>
		<h2>Ellipse</h2>
		<aside class="zentrum">
			<span class="moveY">
				<span class="ellipse"></span>
			</span>
		</aside>
	</section>
		
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_transform-rotate3.html&oldid=68865“