Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah atribut yang digunakan untuk mencapai kesan putaran dalam css3

Apakah atribut yang digunakan untuk mencapai kesan putaran dalam css3

青灯夜游
Lepaskan: 2022-03-22 19:47:04
asal
2435 orang telah melayarinya

Atribut yang mencapai kesan putaran dalam css3 ialah "transform". Atribut transformasi digunakan untuk menggunakan transformasi 2D atau 3D pada elemen Putaran boleh dicapai apabila digunakan dengan fungsi rotate(), rotate3d(), rotateX(), rotateY() atau rotateZ().

Apakah atribut yang digunakan untuk mencapai kesan putaran dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Atribut yang mencapai kesan putaran dalam css3 ialah "transform".

Atribut transformasi digunakan untuk menggunakan transformasi 2D atau 3D pada elemen Apabila atribut ini digunakan dengan fungsi berikut, putaran elemen boleh dicapai:

  • .

    putar(sudut ) Tentukan putaran 2D dan nyatakan sudut dalam parameter.

  • putar3d(x,y,z,sudut) Takrifkan putaran 3D.

  • rotateX(angle) Mentakrifkan putaran 3D di sepanjang paksi X.

  • putarY(sudut) Mentakrifkan putaran 3D di sepanjang paksi Y.

  • putarZ(sudut) Mentakrifkan putaran 3D di sepanjang paksi Z.

Contoh 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>
Salin selepas log masuk

Apakah atribut yang digunakan untuk mencapai kesan putaran dalam css3

Contoh 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>
Salin selepas log masuk

Apakah atribut yang digunakan untuk mencapai kesan putaran dalam css3

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah atribut yang digunakan untuk mencapai kesan putaran dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan