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

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!