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

Detaillierte Erläuterung des HTML-Body-Tags und häufig verwendeter Steuer-Tags in HTML

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Dieser Artikel verwendet den Befehl crontab in de...

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

Detaillierte Erläuterung des HTML-Body-Tags und häufig verwendeter Steuer-Tags in HTML

Detaillierte Erläuterung der allgemeinen Docker-Befehle Study03

CSS fixiert das Tag auf Containerebene (div...) an einer Position (ganz rechts auf der Seite)

Beispiel einer Skriptmethode für die Bindung von Linux-Dualnetzwerkkarten

So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden

Tutorial zur Installation von MYSQL5.7 aus dem OEL7.6-Quellcode

Beispielcode zur Implementierung komplexer Tabellenüberschriften in HTML-Tabellen

JavaScript Canvas zeichnet dynamische Drahtgittereffekte

Verwendung des Linux-Lesebefehls

Verwenden Sie einige Interviewfragen, um den Ausführungsmechanismus von JavaScript zu untersuchen

Artikel empfehlen

So unterscheiden Sie MySQLs innodb_flush_log_at_trx_commit und sync_binlog

Natives JS zur Implementierung eines Dropdown-Menüs

Detaillierte Erklärung der Verwendung von zwei Arten von temporären Tabellen in MySQL

Vergleichstabelle für chinesische und englische Dateinamen der Founder-Schriftbibliothek

Detaillierte Erklärung der in JavaScript integrierten Objekte, Mathematik und Zeichenfolgen

30 kostenlose hochwertige englische Ribbon-Schriftarten

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 (Windows 10)

Vue-Formulareingabebindung V-Modell

Detaillierte Erklärung des Javascript Echarts Luftqualitätskarteneffekts

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Detaillierte Erläuterung der Startreihenfolge des Docker-Containers mithilfe eines Shell-Skripts

Ubuntu-Grundeinstellungen: Installation und Nutzung des OpenSSH-Servers

Datendiebstahl mit CSS in Firefox

Einführung und Installation von MySQL Shell

MySQL-Leistungsoptimierungs-Index-Pushdown