So erreichen Sie eine 2D-Transformation in CSS3-Front-End-Fragen und Antworten-php.cn

So erreichen Sie eine 2D-Transformation in CSS3

青灯夜游

Freigeben： 2022-03-18 17:13:16

Original

1647 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!