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

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

So installieren Sie JDK8 unter Windows

Eine kurze Diskussion darüber, ob CSS-Animationen durch JS blockiert werden

Beispiel für die Verwendung eines manipulationssicheren JavaScript-Objekts

Detaillierte Erklärung der Befehle zur Berechtigungsverwaltung in Linux (chmod/chown/chgrp/unmask)

JavaScript-Dom-Objektoperationen

Detaillierte Erklärung zweier schneller Möglichkeiten zum Schreiben von console.log in vscode

Detaillierte Erläuterung des Startens und Einhängens des Docker-Nginx-Containers in den lokalen

Lösung für den Fehler „MySQL-Server ist verschwunden“

Beispielcode zum Konfigurieren von Überwachungselementen und aggregierten Grafiken in Zabbix

Analyse der Verwendung temporärer MySQL-Tabellen [Abfrageergebnisse können in temporären Tabellen gespeichert werden]

Artikel empfehlen

js implementiert das Ein- und Ausblenden von Inhalten mit der Maus über die Karte

Grafisches Tutorial zur Offline-Installation und Konfiguration von MySQL 8.0.2

Analyse der Prinzipien und der Nutzung von Docker-Container-Datenvolumes

Fehlerbehebung bei hohem Speicherverbrauch von NodeJs, tatsächlicher Kampfrekord

Tutorial zur Remote-Verbindung mit einer MySQL-Datenbank unter Linux

Ich zeige Ihnen, wie Sie Schriftsymbole in CSS verwenden

Wie stellt MySQL eine Verbindung zum entsprechenden Clientprozess her?

Eine Reihe häufig verwendeter Betriebs- und Wartungsbefehle für Linux (Zusammenfassung)

Warum wird in MySQL keine UTF-8-Kodierung verwendet?

Docker-Image erstellen Dockerfile und Commit-Operationen

Fabric.js implementiert DIY-Postkartenfunktion

Analyse und Lösung der Gründe für Links- und Rechtssprünge beim Laden von Webseiten

Implementierung eines Tomcat-Images, das mit Dockerfile basierend auf Alpine erstellt wurde

Detailliertes Beispiel für die Verkettung mehrerer Felder in MySQL

Lösung für das Problem, dass der Eintrag bei der Installation von mysql5.7.18 nicht gefunden werden kann