Beispiel:CSS3 transform-translate.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:translate()</title>
  <style>
main:hover .translateXY {
	transform: translate(calc(100% + 20px), 260px);
}

main:hover .translateX {
	transform: translatex(calc(100% + 20px));
}

main:hover .translateY {
	transform: translatey(260px);
}
.box {
	border-radius: 10px;
	box-shadow: 1px 1px 10px 0;
	padding: 1rem;
	transition: all 2s;
}

.translateXY {
	background: #c32e04;
	color: white;
}

.translateX {
	background: #dfac20;
}

.translateY {
	background: #337599;
	color: white;
}

main {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em;
}


</style>
</head>
<body>
	<h1>Verschiebung von <code>transform:translate()</code></h1>
	<p>Bewegen Sie die Maus auf diesen Inhaltsbereich!</p>
	<main>

			<section class="box translateXY">
				<h2>translate</h2>
				<p>CSS:</p>
				<code>translate(calc(100% + 20px), 260px);</code>
				<p>Wenn nur ein Wert angegeben wird, wird nur die x-Achse verschoben.</p>
			</section>

			<section class="box translateX">
				<h2>translateX</h2>
				<p>CSS:</p>
				<code>translateX(calc(100% + 20px))</code>
			</section>

			<section class="box translateY">
				<h2>translateY</h2>
				<p>CSS:
				<code>translateY(260px);</code></p>
				<p>Es sind sowohl positive (nach unten) als auch negative Angaben (nach oben) möglich.</p>
			</section>
		</main>
	</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_transform-translate.html&oldid=68880“