Heim > Artikel > Web-Frontend > Verwendung von CSS3-3D-Transformationsfunktionen

Verwendung von CSS3-3D-Transformationsfunktionen

王林nach vorne: 2023-09-16 14:33:07911Durchsuche

Mithilfe von 3D-Transformationen können wir Elemente auf die X-Achse, Y-Achse und Z-Achse verschieben. Im Folgenden sind einige Methoden der CSS3-3D-Transformation aufgeführt: Die folgenden Methoden werden zum Aufrufen der 3D-Transformation verwendet: n,n,n,n,n,n,n,n,n,n,n ,n,n)

wird verwendet, um Elemente mithilfe der 16 Werte der Matrix zu transformieren.

2translate3d( x,y,z) wird verwendet, um Elemente mithilfe der Y-Achse und Z-Achse wird zum Transformieren von Elementen mithilfe der Element für die Verwendung des Y-Achsen-Konvertierungselements Live-Demonstration

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   display: inline-block;
   width: 200px;
   height: 200px;
   border: 1px solid #CCC;
   margin-left: 20px;
}
.rotateX {
   width: 100%;
   height: 100%;
   background: rgb(52, 0, 241);
   transform: perspective(600px) rotateX(85deg);
}
.rotateY {
   width: 100%;
   height: 100%;
   background: rgb(55, 0, 255);
   transform: perspective(600px) rotateY(75deg);
}
.translateZ{
   width: 100%;
   height: 100%;
   background: rgb(55, 0, 255);
   transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html>


	3 translateX(x)
	5 translatez (z)
	Die folgende CSS3-3D-Transformationsfunktion ist Code - Beispiel.
Ausgabe	Der obige Code erzeugt die folgende Ausgabe:

Das obige ist der detaillierte Inhalt vonVerwendung von CSS3-3D-Transformationsfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css3

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was sind CSS-Pseudoklassen?Nächster Artikel：Was sind CSS-Pseudoklassen?

In Verbindung stehende Artikel

Mehr sehen