Heim >Web-Frontend >CSS-Tutorial >So konvertieren Sie 2D und 3D in CSS3
Dieser Artikel befasst sich mit der 2D-Konvertierung und der 3D-Konvertierung in CSS3. Er hat einen bestimmten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.
Durch die Konvertierung können wir Elemente transformieren, um sie zu verschieben , Zoomen, Drehen, Strecken oder Strecken, Sie müssen beim Schreiben des Programms auf Browserkompatibilitätsprobleme achten und darauf achten, klar zu schreiben
Chrome und Safari erfordern das Präfix -webkit- und Internet Explorer 9 erfordert das Präfix -ms-
Internet Explorer 10 und Firefox unterstützen die 3D-Konvertierung, aber Opera unterstützt immer noch keine 3D-Konvertierung
Empfohlene Kurse 【css3】
2D-Transformation
translate() bedeutet Verschieben von seine aktuelle Position Stellen Sie auf den eingestellten Wert den linken Wert und den oberen Wert
translate(100px,30px)//从左侧移动100px,从上往下移30px
rotate() ein, um den eingestellten Winkel für die Drehung des Elements im Uhrzeigersinn anzugeben. Wenn es sich um einen negativen Wert handelt, bedeutet dies, dass das Element gedreht werden soll gegen den Uhrzeigersinn
rotate(30deg)//顺时针旋转30度
scale() bedeutet, dass die Größe des Elements durch Festlegen der Breite (X-Achse) und Höhe (Y-Achse) vergrößert oder verkleinert wird.
scale(3,4)//把宽度扩大为原来的2倍,把高度变为原来的4倍
skew() bedeutet, dass das Element dies tut Um den eingestellten Winkel drehen, X- und Y-Achse einstellen
skew(30deg,20deg)//沿X轴把元素翻转30度,沿Y轴翻转20度
matrix()
matrix()-Methode ist eine allgemeine 2D-Methode einschließlich mathematischer Funktionen, Drehung, Skalierung, Bewegung und Neigung
matrix(0.866,0.5,-0.5,0.866,0,0)
例: <style> /*在chrome浏览器下运行*/ div { width:200px; height: 100px; text-align: center; line-height:100px; background-color: pink; -webkit-transform:translateX(150px);/*X轴移动150px*/ -webkit-transform:rotate(-50deg);/*按逆时针旋转50度*/ -webkit-transform:skew(20deg,20deg);/*沿X轴,Y轴旋转20度*/ } </style>
Rendering
3D-Konvertierung
rotateX() stellt dar, wie um wie viele Grad entlang der (x) gilt für den Wert der Skalierungstransformation.
scaleX(x) gibt einen X-Achsenwert an, scaleY(y) gibt einen Y-Achsenwert an, scaleZ(z) gibt einen Z-Achsenwert an.
rotateX(30deg)//沿X轴旋转30度
rotate3d(x,y,z,angle): 3D-Rotation.
rotateX(angle) ist eine 3D-Rotation entlang der
translateX(100px)//向左移动100px
perspective(n) Definiert die perspektivische Ansicht des 3D-transformierten Elements.
Aber der aktuelle Browser unterstützt diesen Effekt nicht
scaleX(1.5)//沿水平方向扩大1.5倍 scaleX(0.5)//沿水平方向缩小0.5倍
Rendering
Zusammenfassung: Das Obige ist der Inhalt dieses Artikels, I Ich hoffe, es wird für alle hilfreich sein, CSS3 zu lernen.Das obige ist der detaillierte Inhalt vonSo konvertieren Sie 2D und 3D in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!