Quelle est la syntaxe pour que CSS3 double la taille ?-Questions et réponses frontales-php.cn

Quelle est la syntaxe pour que CSS3 double la taille ?

青灯夜游

Libérer： 2021-12-16 13:53:59

original

2577 Les gens l'ont consulté

La syntaxe pour CSS3 pour doubler l'agrandissement est la suivante : 1. "Élément {largeur : deux fois la valeur de largeur d'origine ; hauteur : deux fois la valeur de hauteur d'origine ;}", utilisez les attributs width et height pour définir la largeur et la hauteur de l'élément sur le Double original ; 2. "Élément {transform: scale(2, 2);}".

Quelle est la syntaxe pour que CSS3 double la taille ?

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

css3 obtient un double effet de grossissement :

1 Utilisez les attributs de largeur et de hauteur

pour définir les valeurs des attributs de largeur et de hauteur à deux fois la largeur et la hauteur d'origine.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				margin: 100px;
			}
			div:hover{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Copier après la connexion

Quelle est la syntaxe pour que CSS3 double la taille ?

2. Utilisez transform: scale(2, 2)

Transform pour appliquer une transformation 2D ou 3D aux éléments. Cette propriété vous permet de faire pivoter, mettre à l'échelle, déplacer, incliner, etc. l'élément.

méthode scale(x,y) pour obtenir l'effet de mise à l'échelle des éléments. Zoom fait référence à la signification de « zoom arrière » et « zoom avant ».

Lorsque la valeur de x ou y est comprise entre 0 et 1, l'élément est réduit ; lorsque la valeur de x ou y est supérieure à 1, l'élément est agrandi.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				margin: 100px;
			}
			div:hover{
				transform: scale(2, 2);
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Copier après la connexion

Quelle est la syntaxe pour que CSS3 double la taille ?