suchen

Heim  >  Artikel  >  Web-Frontend  >  So erreichen Sie eine 2D-Transformation in CSS3

So erreichen Sie eine 2D-Transformation in CSS3

青灯夜游
青灯夜游Original
2022-03-18 17:13:161635Durchsuche

In CSS3 können Sie das Transformationsattribut mit Funktionen wie Translate(), Scale(), Rotate(), Skew(), SkewX(), SkewY() verwenden, um eine 2D-Transformation von Elementen zu erreichen und zu drehen, zu skalieren, und Elemente verschieben, neigen etc.

So erreichen Sie eine 2D-Transformation in CSS3

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS3 können Sie das Transformationsattribut verwenden, um eine 2D-Transformation zu erreichen.

Transform-Eigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können Sie das Element drehen, skalieren, verschieben, neigen usw.

Das Transformationsattribut implementiert eine 2D-Transformationsfunktion ,

n) Definieren Sie die 2D-Transformation mithilfe einer Matrix aus sechs Werten. translate(x,translateY(y)scale([,y]?)scaleX(x)scaleY(y)rotate() definiert die 2D-Rotation und gibt den Winkel in den Parametern an. skew(,y-angle)skewX(angle)skewY(angle)
<!DOCTYPE html>
<html>
	<head>
		<style>
			*,
			*:after,
			*:before {
				box-sizing: border-box;
			}

			body {
				background: #F5F3F4;
				margin: 0;
				padding: 10px;
				font-family: &#39;Open Sans&#39;, sans-serif;
				text-align: center;
			}

			h2,
			h4 {
				font-weight: 400;
				color: #4d4d4d;
			}

			.card {
				display: inline-block;
				margin: 10px;
				background: #fff;
				padding: 10px;
				min-width: 180px;
				box-shadow: 0 3px 5px #ddd;
				color: #555;
			}

			.card .box {
				width: 60px;
				height: 60px;
				margin: auto;
				background: #ddd;
				cursor: pointer;
				box-shadow: 0 0 5px #ccc inset;
			}

			.card .box .fill {
				width: 60px;
				height: 60px;
				position: relative;
				background: #03A9F4;
				opacity: .5;
				box-shadow: 0 0 5px #ccc;
				-webkit-transition: 0.3s;
				transition: 0.3s;
			}

			.card p {
				margin: 25px 0 0;
			}

			.rotate:hover .fill {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.scale:hover .fill {
				-webkit-transform: scale(2, 2);
				transform: scale(2, 2);
			}

			.scaleX:hover .fill {
				-webkit-transform: scaleX(2);
				transform: scaleX(2);
			}

			.scaleY:hover .fill {
				-webkit-transform: scaleY(2);
				transform: scaleY(2);
			}

			.skew:hover .fill {
				-webkit-transform: skew(45deg, 45deg);
				transform: skew(45deg, 45deg);
			}

			.skewX:hover .fill {
				-webkit-transform: skewX(45deg);
				transform: skewX(45deg);
			}

			.skewY:hover .fill {
				-webkit-transform: skewY(45deg);
				transform: skewY(45deg);
			}

			.translate:hover .fill {
				-webkit-transform: translate(45px, 1em);
				transform: translate(45px, 1em);
			}

			.translateX:hover .fill {
				-webkit-transform: translateX(45px);
				transform: translateX(45px);
			}

			.translateY:hover .fill {
				-webkit-transform: translateY(45px);
				transform: translateY(45px);
			}

			.matrix:hover .fill {
				-webkit-transform: matrix(2, 2, 0, 2, 45, 0);
				transform: matrix(2, 2, 0, 2, 45, 0);
			}
		</style>
	</head>
	<body>
		<!-- Rotate-->
		<div class="card">
			<div class="box rotate">
				<div class="fill"></div>
			</div>
			<p>rotate(45deg) </p>
		</div>
		<!-- scale-->
		<div class="card">
			<div class="box scale">
				<div class="fill"></div>
			</div>
			<p>scale(2)</p>
		</div>
		<div class="card">
			<div class="box scaleX">
				<div class="fill"></div>
			</div>
			<p>scaleX(2) </p>
		</div>
		<div class="card">
			<div class="box scaleY">
				<div class="fill"></div>
			</div>
			<p>scaleY(2) </p>
		</div>
		<!-- skew-->
		<div class="card">
			<div class="box skew">
				<div class="fill"></div>
			</div>
			<p>skew(45deg, 45deg) </p>
		</div>
		<div class="card">
			<div class="box skewX">
				<div class="fill"></div>
			</div>
			<p>skewX(45deg)</p>
		</div>
		<div class="card">
			<div class="box skewY">
				<div class="fill"></div>
			</div>
			<p>skewY(45deg)</p>
		</div>
		<!-- translate-->
		<div class="card">
			<div class="box translate">
				<div class="fill"></div>
			</div>
			<p>translate(45px) </p>
		</div>
		<div class="card">
			<div class="box translateX">
				<div class="fill"></div>
			</div>
			<p>translateX(45px)</p>
		</div>
		<div class="card">
			<div class="box translateY">
				<div class="fill"></div>
			</div>
			<p>translateY(45px)</p>
		</div>
		<div class="card">
			<div class="box matrix">
				<div class="fill"></div>
			</div>
			<p> matrix(2, 2, 0, 2, 45, 0)</p>
		</div>
	</body>
</html>
CSS-Video-TutorialWeb-Frontend)
y) definiert die 2D-Transformation. translateX(x) definiert die Transformation, indem einfach der Wert der X-Achse verwendet wird.
definiert die Transformation, indem einfach der Y-Achsenwert verwendet wird. x
definiert die 2D-Skalierungstransformation.
Definieren Sie die Skalierungstransformation, indem Sie den Wert der X-Achse festlegen.
Definieren Sie die Skalierungstransformation, indem Sie den Wert der Y-Achse festlegen. angle
x-angle
definiert eine 2D-Skew-Transformation entlang der X- und Y-Achse.
definiert eine 2D-Schrägtransformation entlang der X-Achse.
definiert eine 2D-Schrägtransformation entlang der Y-Achse. Beispiel:
(Lernvideo-Sharing: ,

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine 2D-Transformation in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 transform
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie viele Arten von CSS3-Übergangseigenschaften gibt es?Nächster Artikel：Wie viele Arten von CSS3-Übergangseigenschaften gibt es?

In Verbindung stehende Artikel

Mehr sehen