skew bedeutet „skew“ und ist eine in CSS integrierte Funktion, die zusammen mit dem Transformationsattribut für die Skew-Transformation von Elementen verwendet werden muss. Es gibt drei Arten von Skew in CSS: „skew(x-angle,y-angle)“ Neigungskonvertierung entlang der X- und Y-Achse, „skewX(angle)“ oder „skewY(angle)“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
skew bedeutet „skew“ und ist eine in CSS integrierte Funktion, die zusammen mit dem Transformationsattribut für die Skew-Transformation von Elementen verwendet werden muss.
Transform-Eigenschaft wird auf die 2D- oder 3D-Transformation des Elements angewendet. Mit dieser Eigenschaft können Sie das Element drehen, skalieren, verschieben, neigen usw.
Es gibt 3 Arten von Skew()
skew(x-angle,y-angle) Definieren Sie die 2D-Skew-Transformation entlang der X- und Y-Achse.
skewX(angle) Definiert die 2D-Skew-Transformation entlang der X-Achse.
skewY(angle) Definiert die 2D-Skew-Transformation entlang der Y-Achse.
skewX()
Neigen Sie das Element. Der Winkel wird ausgefüllt. Unten ↓ sehen Sie, dass sich die Höhe beim Neigen des Elements nicht ändert. Wenn Sie schlau sind, werden Sie sicher wissen, dass die Höhe unverändert bleibt, was bedeutet, dass die Y-Achse gestreckt wird.
Ähnlich wie beim Maßstab ändert sich auch der Maßstab der Achse. → Scale
skew
ist eine Kombination aus Skewx und Skewy, es gibt jedoch Unterschiede.
Wenn Sie einen einzelnen Parameter verwenden, hat dies den gleichen Effekt wie die alleinige Verwendung von skewx und skewy
Aber! Wenn Sie zwei Parameter gleichzeitig verwenden, gibt es einen kleinen Unterschied zur gleichzeitigen Verwendung von skewx und skewy.
Also, warum kommt es zu diesem Unterschied? Tatsächlich ist der Grund sehr einfach. Die Ausführungsreihenfolge von skewX(40deg), skewY(40deg) besteht darin, zuerst 40deg entsprechend der X-Achse und dann 40deg entsprechend der Y-Achse zu neigen. ist nicht so. Er arbeitet gleichzeitig, daher sind die Ergebnisse leicht unterschiedlich.
Empfehlung für Lernvideos: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWas bedeutet Skew in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
