Heim  >  Artikel  >  Web-Frontend  >  Welche Attribute werden verwendet, um Rotationseffekte in CSS3 zu erzielen?

Welche Attribute werden verwendet, um Rotationseffekte in CSS3 zu erzielen?

青灯夜游
青灯夜游Original
2021-12-14 17:38:282391Durchsuche

Das Attribut, das in CSS3 einen Rotationseffekt erzielt, ist „transformieren“. Das Transformationsattribut wird verwendet, um eine 2D- oder 3D-Transformation auf ein Element anzuwenden. Eine Drehung kann erreicht werden, wenn es mit den Funktionen „rotate()“, „rotate3d()“, „rotateX()“, „rotateY()“ oder „rotateZ()“ verwendet wird.

Welche Attribute werden verwendet, um Rotationseffekte in CSS3 zu erzielen?

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

Das Attribut, das in CSS3 einen Rotationseffekt erzielt, ist „transformieren“. Das Attribut

transform wird verwendet, um eine 2D- oder 3D-Transformation auf ein Element anzuwenden. Wenn dieses Attribut zusammen mit der folgenden Funktion verwendet wird, kann die Elementrotation erreicht werden:

  • rotate(angle) Definieren Sie die 2D-Rotation und geben Sie an Winkel in den Parametern.

  • rotate3d(x,y,z,angle) definiert die 3D-Rotation.

  • rotateX(angle) Definiert eine 3D-Rotation entlang der X-Achse.

  • rotateY(angle) Definiert die 3D-Rotation entlang der Y-Achse.

  • rotateZ(angle) Definiert die 3D-Rotation entlang der Z-Achse.

Beispiel 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:200px;
	height:100px;
	background-color:yellow;
	/* Rotate div */
	transform:rotate(7deg);
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello</div>

</body>
</html>

Welche Attribute werden verwendet, um Rotationseffekte in CSS3 zu erzielen?

Beispiel 2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<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;
			}

			h1 {
				color: #4c4c4c;
				font-weight: 600;
				border-bottom: 1px solid #ccc;
			}

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

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

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

			.card .box .fill {
				width: 100px;
				height: 100px;
				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);
			}

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

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

			.rotateZ: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);
			}
		</style>
	</head>
	<body>
		<h1>CSS3 元素旋转</h1>
		<!-- Rotate-->
		<div class="card">
			<div class="box rotate">
				<div class="fill"></div>
			</div>
			<p>rotate(45deg) </p>
		</div>
		<div class="card">
			<div class="box rotateX">
				<div class="fill"></div>
			</div>
			<p>rotateX(45deg)</p>
		</div>
		<div class="card">
			<div class="box rotateY">
				<div class="fill"></div>
			</div>
			<p>rotateY(45deg)</p>
		</div>
		<div class="card">
			<div class="box rotateZ">
				<div class="fill"></div>
			</div>
			<p>rotateZ(45deg) </p>
		</div>
	</body>
</html>

Welche Attribute werden verwendet, um Rotationseffekte in CSS3 zu erzielen?

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWelche Attribute werden verwendet, um Rotationseffekte in CSS3 zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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