CSS3 verwendet scale() und rotate() zum Zoomen und Drehen

1. scale()-Methode

Zoom steht für „Verkleinern“ und „Vergrößern“. In CSS3 können wir die Methode scale() verwenden, um ein Element basierend auf dem Mittelpunktsursprung zu skalieren.

Wie die Methode translate() hat auch die Methode scale() drei Fälle:

(1) scaleX(x): das Element wird nur horizontal skaliert (Skalierung der X-Achse);
(2) scaleY(y): das Element wird nur vertikal skaliert (Skalierung der Y-Achse);
(3) scale(x,y): das Element wird gleichzeitig horizontal und vertikal skaliert (X-Achse und Y-Achse werden gleichzeitig skaliert);

1. SkalaX(x)

Grammatik:

transformieren:scaleX(x)

veranschaulichen:

x stellt das Vielfache der horizontalen Skalierung des Elements (X-Achse) dar. Wenn es größer als 1 ist, bedeutet es, dass hineingezoomt wird; wenn es kleiner als 1 ist, bedeutet es, dass herausgezoomt wird.
Dies ist leicht zu verstehen, wenn Sie über das Konzept der Vielfachen nachdenken.

2. SkalaY(y)

Grammatik:

transformieren:skalierenY(y)

veranschaulichen:

y stellt den Skalierungsfaktor des Elements entlang der vertikalen Richtung (Y-Achse) dar. Wenn es größer als 1 ist, bedeutet es eine Vergrößerung; wenn es kleiner als 1 ist, bedeutet es eine Verkleinerung.

3. Maßstab(x,y)

Grammatik:

transformieren:skalieren(x,y)

veranschaulichen:

x stellt das Vielfache des Elements entlang der horizontalen Richtung (X-Achse) dar und y stellt das Vielfache des Elements entlang der vertikalen Richtung (Y-Achse) dar.
Beachten Sie, dass Y ein optionaler Parameter ist. Wenn der Y-Wert nicht festgelegt ist, bedeutet dies, dass die Skalierungsfaktoren in X- und Y-Richtung gleich sind (sie werden gleichzeitig um das gleiche Vielfache vergrößert).

Beispiel:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf> 
    <title>CSS3-Skalierung ()-Verwendung</title>
    <style type="text/css">
        /*Den ursprünglichen Elementstil festlegen*/
        .hauptsächlich
        {
            Rand: 100px auto;/*Horizontal zentriert*/
            Breite: 300px;
            Höhe: 200px;
            Rand: 1px gestrichelt grau;
        }
        /*Den aktuellen Elementstil festlegen*/
        #jb51
        {
            Breite: 300px;
            Höhe: 200px;
            Farbe: weiß;
            Hintergrundfarbe: #3EDFF4;
            Textausrichtung: zentriert;
            transformieren:scaleX(1.5);
            -webkit-transform:scaleX(1.5); /*Kompatibel mit -webkit-engine-Browsern*/
            -moz-transform:scaleX(1.5); /*Kompatibel mit -moz-engine-Browsern*/
        }
		/*Gewöhnlicher und bequemer Vergleich*/
		 #jbzj
        {
            Breite: 300px;
            Höhe: 200px;
            Farbe: weiß;
            Hintergrundfarbe: #3EDFF4;
            Textausrichtung: zentriert;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Haupt">
        <div id="jb51">123WORDPRESS.COM1</div>
    </div>
    <div Klasse="Haupt">
        <div id="jbzj">123WORDPRESS.COM2</div>
    </div>
</body>
</html>

Der Vorschaueffekt im Chrome-Browser ist wie folgt:

analysieren:

Wie aus der obigen Abbildung ersichtlich, wird das Element entlang der X-Achse um das 1,5-fache vergrößert (bei gleichzeitiger Ausdehnung in beide Richtungen beträgt die Gesamtvergrößerung das 1,5-fache).

transformieren:SkalaY(1,5);
-webkit-transform:scaleY(1.5); /*Kompatibel mit -webkit-engine-Browsern*/
-moz-transform:scaleY(1.5); /*Kompatibel mit -moz-engine-Browsern*/

Bei Verwendung des obigen Codes ist der Vorschaueffekt im Browser wie folgt:

CSS3 implementiert die Zoomfunktion über scale()

Implementierung der Rotationsfunktion durch rotate()

Die Funktion rotate() dreht das Element relativ zum Ursprung um den angegebenen Winkelparameter. Es arbeitet hauptsächlich im zweidimensionalen Raum und legt einen Winkelwert fest, um die Rotationsamplitude festzulegen. Wenn dieser Wert positiv ist, dreht sich das Element relativ zum Ursprung im Uhrzeigersinn, wenn dieser Wert negativ ist, dreht sich das Element relativ zum Ursprung gegen den Uhrzeigersinn. Wie in der folgenden Abbildung dargestellt:

HTML Quelltext:

<div Klasse="Wrapper">
  <div></div>
</div>

CSS Code:

.wrapper {
  Breite: 200px;
  Höhe: 200px;
  Rand: 1px gepunktet rot;
  Rand: 100px automatisch;
}
.wrapper div {
  Breite: 200px;
  Höhe: 200px;
  Hintergrund: orange;
  -webkit-transform: drehen(45 Grad);
  transformieren: drehen (45 Grad);
}

Demonstrationsergebnisse

Der Übergang kann die Zeit festlegen, die zum Ändern des Elements erforderlich ist.

Strukturieren Sie den Code in HTML

<ul>
<li><img src="bild/1.jpg" ></li>
<li><img src="bild/2.jpg" ></li>
<li><img src="bild/3.jpg" ></li>
</ul>

CSS3-Stile

ul{ 
Rand oben: 50px; 
Listenstil: keiner; 
} 
ul li{ 
Breite: 200px; 
Höhe: 150px; 
schweben: links; 
Rand links: 10px; 
-webkit-transition:alles 1en; 
-moz-transition:alles 1en; 
-o-Übergang: alles 1en; 
} 
ul li:hover{ 
-webkit-transform:Skalierung(1,5)Drehen(10 Grad); 
-moz-transform:Skalierung(1,5)Drehen(10 Grad); 
-o-transform:Skalierung(1,5)Drehen(10 Grad); 
} 
li img{ 
Breite: 100 %; 
Höhe: 100 %; 
}

Oben sind die Details, wie CSS3 scale() und rotate() verwendet, um Vergrößerung und Drehung zu erreichen. Weitere Informationen zur Vergrößerung und Drehung in CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<: MySQL fügt schnell 100 Millionen Testdaten ein

>>: Detaillierte Erklärung des Vue-Mixins

Vergleich mehrerer Beispiele zur Einfügungseffizienz in MySQL

Artikel empfehlen

Detaillierte Beschreibung von nginx von der Kompilierung und Installation bis zur Beschreibung der Konfigurationsdatei auf Chinesisch

Dieser Artikel stellt Nginx ausführlich vor, von ...

So aktivieren Sie die schreibgeschützte Select-Unterstützung, wenn der Hintergrund bei festgelegtem deaktiviertem Attribut keine Daten lesen kann

Code kopieren Der Code lautet wie folgt: <span...

CSS3 verwendet scale() und rotate() zum Zoomen und Drehen

Vergleich mehrerer Beispiele zur Einfügungseffizienz in MySQL

Verwenden Sie Standard-DL-, DT- und DD-Tags, um Tabellenlisten zu verwerfen

Installationstutorial auf Unternehmensebene unter Verwendung des LAMP-Quellcodes

Allgemeine Textverarbeitungsbefehle unter Linux und Vim-Texteditor

Absoluter Pfad-URL und relativer Pfad-URL in HTML und Unterverzeichnis, übergeordnetes Verzeichnis, Stammverzeichnis

Verwenden von JS zum Implementieren eines einfachen Rechners

Detaillierte Erläuterung der Implementierungsschritte von MySQL Dual-Machine Hot Standby und Load Balancing

Beispiel für die Konvertierung von Spark RDD in einen Dataframe und das Schreiben in MySQL

So stellen Sie über Navicat eine Remoteverbindung zu MySQL her

Beispieloperation MySQL Kurzlink

Artikel empfehlen

Detaillierte Beschreibung von nginx von der Kompilierung und Installation bis zur Beschreibung der Konfigurationsdatei auf Chinesisch

Eingabedatei zur benutzerdefinierten Schaltflächenverschönerung (Demo)

Das MySQL-Passwort enthält Sonderzeichen und den Anmeldevorgang über die Befehlszeile

Fügen Sie beim Schreiben von HTML-Links immer Schrägstriche zu Unterordnern hinzu, um HTTP-Anfragen zu reduzieren

Mysql: Der als Definierer angegebene Benutzer ('xxx@'%') existiert nicht – Lösung

Lösung zum Hinzufügen einer iptables-Firewall-Richtlinie zum MySQL-Dienst

Docker verwendet CMD- oder ENTRYPOINT-Befehle, um mehrere Dienste gleichzeitig zu starten

MYSQL METADATA LOCK (MDL LOCK) Theorie und Sperrtyptest

Unterschied und Implementierung von JavaScript Anti-Shake und Throttling

Lernen Sie die asynchrone Programmierung in Node.js in einem Artikel

So aktivieren Sie die schreibgeschützte Select-Unterstützung, wenn der Hintergrund bei festgelegtem deaktiviertem Attribut keine Daten lesen kann

Javascript um den Drag-Effekt der Login-Box zu erreichen

Zusammenfassung der Unterschiede zwischen den Methoden find() und filter() in JavaScript

Zusammenfassung der Erfahrungen mit der Entwicklung von HTML+CSS-Projekten (empfohlen)

Erfahren Sie, wie Sie ein Vue-Projekt mit Docker bereitstellen