Analyse der Skalenskalierung in der CSS3-Transformation

Dieser Artikel stellt hauptsächlich die Verwendung der Skalierungsskalierung in der CSS3-Transformation vor.

Im Folgenden stellen wir sie unter drei Aspekten vor:

1 Skalierung ( x ,y) Skalieren Sie das Element

X stellt den Skalierungsfaktor in horizontaler Richtung dar. | Y stellt den Skalierungsfaktor in vertikaler Richtung dar.
Y ist ein optionaler Parameter in der Richtung ist das Gleiche. Und vorbehaltlich X.
transform:scale(2,2.5);
2. Das Element „scaleX(d80b5def5ed1be6e26d91c2709f14170)“ skaliert das Element nur auf der X-Achse (horizontale Richtung).
Der Standardwert ist 1 und der Basispunkt liegt immer noch in der Mitte des Elements. Der Basispunkt kann durch transform-origin
transform:scaleX(2)
3 geändert werden. Das Element „scaleY(d80b5def5ed1be6e26d91c2709f14170)“ skaliert das Element nur auf der Y-Achse (vertikale Richtung).
Der Basispunkt liegt ebenfalls in der Mitte des Elements. Der Basispunkt kann durch transform-origin geändert werden.
transform:scaleY(2);

Schauen wir uns zum Schluss die Kompatibilitätsschreibmethode an:

Der Code lautet wie folgt:

.test{  
  -moz-transform:scale(2,2);  
  -webkit-transform:scale(2,2);  
  -o-transform:scale(2,2);  
  background:url(img/i.png) no-repeat;    
  width:198px;  
  height:133px;   
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über CSS-Hintergrund und Hintergrundpositionsanalyse

Über CSS-Analyse zur Verwendung von before und :after Pseudoelementen

Das obige ist der detaillierte Inhalt vonAnalyse der Skalenskalierung in der CSS3-Transformation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!