Heim  >  Artikel  >  Web-Frontend  >  Wie lautet die Syntax für CSS3, um die Größe zu verdoppeln?

Wie lautet die Syntax für CSS3, um die Größe zu verdoppeln?

青灯夜游
青灯夜游Original
2021-12-16 13:53:592551Durchsuche

Die Syntax für CSS3 zum Verdoppeln der Vergrößerung lautet: 1. „Element {Breite: doppelter ursprünglicher Breitenwert; Höhe: doppelter ursprünglicher Höhenwert;}“, verwenden Sie die Attribute „width“ und „height“, um die Breite und Höhe des Elements festzulegen das Original Double; 2. „Element {transform: scale(2, 2);}“.

Wie lautet die Syntax für CSS3, um die Größe zu verdoppeln?

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

css3 erzielt einen doppelten Vergrößerungseffekt:

1. Verwenden Sie die Breiten- und Höhenattribute

, um die Werte der Breiten- und Höhenattribute auf das Doppelte der ursprünglichen Breite und Höhe festzulegen.

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

Wie lautet die Syntax für CSS3, um die Größe zu verdoppeln?

2. Verwenden Sie das Attribut „transform: scale(2, 2)

Transform“, um eine 2D- oder 3D-Transformation auf Elemente anzuwenden. Mit dieser Eigenschaft können Sie das Element drehen, skalieren, verschieben, neigen usw.

scale(x,y)-Methode, um den Skalierungseffekt von Elementen zu erzielen. Zoom bezieht sich auf die Bedeutung von „herauszoomen“ und „vergrößern“.

Wenn der Wert von x oder y zwischen 0 und 1 liegt, wird das Element verkleinert; wenn der Wert von x oder y größer als 1 ist, wird das Element vergrößert.

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

Wie lautet die Syntax für CSS3, um die Größe zu verdoppeln?

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWie lautet die Syntax für CSS3, um die Größe zu verdoppeln?. 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