So implementieren Sie die 2D-Konvertierung in CSS (Beispiel)

Der Inhalt dieses Artikels handelt davon, wie man eine 2D-Konvertierung (Beispiel) in CSS durchführt. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

Skript-CSS
Der Animationseffekt wird durch CSS unten erreicht. Sie können Skript-CSS verwenden, um skalierbare Listen einzuschieben und zu skizzieren, d. h. dynamisches HTML, ein veralteter Begriff DHTML

Einige Grundkenntnisse in CSS

Ich habe schon einmal ein dickes Buch gelesen, jetzt werde ich es kurz lesen und einige Dinge hinzufügen, die ich nicht weiß

Schichtung

Der Webbrowser kombiniert das Stilattribut des Elements und berechnet dann den Stil.

Farbtransparenz und Transluzenz

Farbe hat eine durchscheinende Farbe (weiß nicht, warum Edge nicht kompatibel ist)

Skript-Inline-Stil

p.style.background = "#FFFFFF"

soll die Hinzufügung des CSS-Stils durch js vervollständigen

Da - von js als grammatikalischer Fehler betrachtet wird, wird - in der Kamel-Kasten-Benennung in js vereinheitlicht . Name. Dies ist eine Gewohnheit

In ähnlicher Weise können Sie Attribute auch direkt zum Festlegen

e.setAttribute

verwenden, um den Inline-Stil von CSS festzulegen

Tatsächlich von Hinzufügen Der Inline-Stil von CSS-Attributen erzielt den Effekt. Das heißt, der Wert des Stils

Das Gewicht des Stils ist größer als bei jedem anderen Stil, sodass der mit js generierte Wert des Stils immer funktioniert, es sei denn, sein Gewicht wird absichtlich geändert.

2D-Konvertierung von CSS

Das heißt, führen Sie eine CSS-Konvertierung durch

Koordinaten

Das System zur Beschreibung von Koordinaten ist ein kartesisches Koordinatensystem und ein homogenes Koordinatensystem.

Kartesisches Koordinatensystem

Verwendet eine Reihe numerischer Werte, um einen Punkt auf einer Reihe von Ebenen darzustellen. Seine Koordinaten sind die Rechte-Hand-Regel (in drei Dimensionen)
Mehr https://en.wikipedia.org/wiki/Cartesian_coordinate_system
Die folgende Transformation basiert auf dem kartesischen Koordinatensystem
Unter Verwendung des Punktes Die Matrix wird dargestellt, die Matrix wird transformiert und das entsprechende Ergebnis wird erhalten (lineare Transformation). Führen Sie beispielsweise multiplikative Transformationen, additive Transformationen usw. durch. Das Attribut

transform

ermöglicht die Änderung des Koordinatenraums des visuellen CSS-Formatierungsmodells. Damit können Elemente verschoben, gedreht, skaliert und geneigt werden. Nur wirksam für Elemente auf Blockebene

Der Ursprung

hat drei Werte, einen für die x-Achse, einen für die y-Achse und einen für die z-Achse.
Wie in der Abbildung unten gezeigt

Jeder Wert kann festgelegt werden, dies ist der Ursprung der Drehung
Der spezifische Wert ist Transformationsursprung
Wenn der Anfangswert nicht angegeben ist , es wird direkt vererbt.

Demo

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

rotate rotation

Diese Methode definiert eine Möglichkeit, das Element um einen festen Punkt zu wickeln, der durch transform-origin als Ursprung der Elementtransformation angegeben wird.

Einheitswinkel

Ein grundlegender Datentyp von CSS. Winkel stellt die Größe eines Winkels dar, in den Einheiten Grad (Grad), Gradiant, Bogenmaß, Drehungen (Turns)
Grad Grad
Grad Grad (siehe Mathematik, eine Maßeinheit für Winkel, definiert als das Schneiden eines Kreises). in 400 gleiche Teile, das heißt, ein rechter Winkel entspricht 100 Grad (https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%BA% A6)
Radmaß (Rezension Mathematik https://zh.wikipedia.org/wiki/%E5%BC%A7%E5%BA%A6)
Anzahl der Kreise drehen

Grammatik

Es gibt kein Leerzeichen zwischen der Zahl und der Einheit. Wenn die Zahl 0 ist, kann die Einheit weggelassen werden.
Verwenden Sie am Anfang ein + oder – Zeichen für Winkel im Uhrzeigersinn und negative Zahlen für Winkel gegen den Uhrzeigersinn.

Einige Beispiele

90 Grad = 100 Grad = 0,25 Trun ≈ 1,57 Rad (ungefähr gleich π/2)
Alle folgenden Ausdrücke

Eine Rotationsbeschreibung

Skalierungsskala

Eine CSS-Funktion „scale()“ wird zur Skalierung verwendet. Wird verwendet, um die Größe eines Elements zu ändern und das Element um einen in Vektorform definierten Skalierungswert zu vergrößern und zu verkleinern. Es gibt zwei Werte, einer ist sx und der andere ist sy, und das Ergebnis wird basierend auf den beiden Werten erhalten. Wenn sy nicht gesetzt ist, wird der Wert von sy direkt mit dem Wert von sx gesetzt. Die Einheit ist eine Zahl im CSS-Datentyp

Diese Skalierung unterstützt nur die Transformation auf der euklidischen Ebene (zweidimensionale Ebene)

Der festgelegte CSS-Wert ist

transform: scale(2, 2);

An diesem Punkt ist eine Vergrößerung um das Doppelte der horizontalen Achse und das Doppelte der vertikalen Achse abgeschlossen.
Ebenso können Sie auch die Größe reduzieren.

skew skew

ist die Änderung des Originals auf einer schiefen zweidimensionalen Ebene, und das Ergebnis ist ein Datentyp.

剪切映射

css的倾斜为剪切映射,每个点的坐标由与指定角度或成比例的值到原点的距离。对于每个坐标产生矩阵，然后对矩阵进行运算，得出运算后的坐标值。

css的3d转换

坐标

齐次坐标系

由笛卡尔坐标系投影得到。
1. 投影平面中的任何点由三元组（x，y，z）表示，称为点的齐次坐标和投影坐标
2. 如果坐标乘以公因子，则给定的一组齐次坐标点不变
3. 相反，当且仅当通过所有坐标乘以相同的非零常数，从另一个获得一个时，两组齐次坐标表示相同的点
4. 当z不为0时，表示的点为欧几里得的点。
5. 当z为0时表示的点为无穷远处的点

rotateX()

围绕x轴进行旋转

ps；设置的原点值为center
即

transform-origin:center;

rotateY()同理

3d组合不可进行交换，如果进行交换会导致出现不同的效果。

相关推荐：

css3如何实现自定义滚动条样式？（代码）

在页面中怎么用css让图片有立体感的效果?（代码实测）

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die 2D-Konvertierung in CSS (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!