Quels sont les attributs utilisés pour obtenir des effets de rotation en CSS3-Questions et réponses frontales-php.cn

Quels sont les attributs utilisés pour obtenir des effets de rotation en CSS3

青灯夜游

Libérer： 2022-03-22 19:47:04

original

2431 Les gens l'ont consulté

L'attribut qui permet d'obtenir un effet de rotation en CSS3 est "transform". L'attribut transform est utilisé pour appliquer une transformation 2D ou 3D à un élément. La rotation peut être obtenue lorsque cet attribut est utilisé avec les fonctions rotate(), rotate3d(), rotateX(), rotateY() ou rotateZ().

Quels sont les attributs utilisés pour obtenir des effets de rotation en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

L'attribut qui permet d'obtenir un effet de rotation en CSS3 est "transform". L'attribut

transform est utilisé pour appliquer une transformation 2D ou 3D aux éléments. Lorsque cet attribut est utilisé avec la fonction suivante, la rotation de l'élément peut être réalisée :

rotate(angle) Définit la rotation 2D, en spécifiant l'angle dans le champ. paramètres.
rotate3d(x,y,z,angle) définit la rotation 3D.
rotateX(angle) Définit une rotation 3D le long de l'axe X.
rotateY(angle) Définit la rotation 3D le long de l'axe Y.
rotateZ(angle) Définit la rotation 3D le long de l'axe Z.

Exemple 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>

Copier après la connexion

Quels sont les attributs utilisés pour obtenir des effets de rotation en CSS3

Exemple 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>

Copier après la connexion

Quels sont les attributs utilisés pour obtenir des effets de rotation en CSS3