CSS3 3D-Transformation

CSS3 3D-Transformationsfunktion ermöglicht es, in3Transformierte Elemente im D-Raum.

des Elements3D-Umwandlung

Verwenden Sie CSS3 3D-Transformationsfunktion, mit der Sie grundlegende Transformationsoperationen für Elemente im dreidimensionalen Raum ausführen können, wie z.B. Bewegen, Drehen, Skalieren und Neigen.

Transformierte Elemente beeinflussen nicht die umliegenden Elemente, können aber wie absolute positionierte Elemente übereinander gelegt werden. Allerdings belegen transformierte Elemente in ihrer Standardposition (nicht transformiert) immer noch Platz im Layout.

Verwenden Sie CSS-Transformationen und die Transformationsfunktion Transform()

CSS3 Die transform-Attribut verwendet Transformationsfunktionen, um den Koordinatensystem der Elemente zu manipulieren, um Transformationseffekte anzuwenden.

Der folgende Teil beschreibt3D-Transformationsfunktion:

translate3d() Funktion

rotation3Die Funktion d() verwandelt3Elemente im D-Raum drehen sich um den Vektor [x, y, z] um einen bestimmten Winkel um den Punkt. Dies kann als rotate(vx, vy, vz, angle) geschrieben werden.

Beispiel

.container {
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px fest #e5a043;
　　　　background: #fff2dd;
}
.transformed {
　　　　-webkit-transform: übersetzen3d(25px,　25px,　50px);　/*　Chrome, Safari, Opera　*/
　　　　transform: übersetzen3d(25px,　25px,　50px);　
}

Diese Funktion translate3d(25px, 25px, 5Bewegen Sie das Bild entlang der X- und Y-Achsen in die positive Richtung25Pixel, und entlang der positiven Richtung der Z-Achse bewegen5Pixel, und entlang der positiven Richtung der Z-Achse bewegen

30 Pixel.

D-Transformationen verwenden, die dreidimensionale Koordinaten verwenden, aber die Bewegungen entlang der Z-Achse sind nicht immer offensichtlich, da diese Elemente in einer zweidimensionalen Ebene (Ebene) existieren und keine Tiefe haben.-Die CSS-Eigenschaft origin gibt der Szene Tiefenwahrnehmung hinzu. Durch das Erhöhen der Elemente entlang der Z-Achse (d.h. den Elementen, die näher am Betrachter sind, erscheinen größer und den Elementen, die weiter weg sind, erscheinen kleiner) können Sie mit perspective und perspective

rotate3d() Funktion

Diese rotate3d() Funktion dreht das Element im D-Raum um die Vektorrichtung [x, y, z] und3D-Raumelemente um einen bestimmten Winkel drehen. Es kann in Form von rotate(vx, vy, vz, angle) geschrieben werden.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px fest2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: rotate3d(0,　1, 0,　60grad);　/*　Chrome, Safari, Opera　*/
　　　　transform: rotate3d(0,　1, 0,　60grad);　
}

Diese Funktion rotate3d(0, 1, 0, 60grad) das Bild entlang der Y-Achse drehen6Grad. Sie können auch negative Werte verwenden, um das Element in die entgegengesetzte Richtung zu drehen.

scale3d() Funktion

scale3d() Funktion ändert die Größe des Elements. Es kann in Form von scale(sx, sy, sz) geschrieben werden. Es zeigt keine Wirkung, es sei denn, es wird mit anderen Transformationsfunktionen wie Rotation und Perspektive kombiniert, wie im folgenden Beispiel gezeigt.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px fest #6486ab;
　　　　background: #e9eef3;
}
.transformed {
　　　　-webkit-transform: scale3d(1,　1,　2) rotate3d(1, 0, 0,　60grad);　/*　Chrome, Safari, Opera　*/
　　　　transform: scale3d(1,　1,　2) rotate3d(1, 0, 0,　60grad);　
}

Funktion scale3d(1, 1, 2) entlang der Z-Achse skalieren, die Funktion rotate3d(1, 0, 0, 60grad) das Bild entlang der X-Achse drehen60 Grad.

matrix3d() Funktion

matrix3d() Funktion kann alle auf einmal ausführen3D-Transformation, z.B. Verschiebung, Drehung und Skalierung. Sie nimmt4×4TransformationMatrixin Form der16Parameter.

Dies ist die Verwendung von matrix3d() Funktion ausführen3Beispiel für D-Transformation.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px fest #d14e46;
　　　　background: #fddddb;
}
.transformed {
　　　　-webkit-transform: matrix3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　/*　Chrome, Safari, Opera　*/
　　　　transform: matrix3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　
}

Wenn mehrere Transformationen gleichzeitig ausgeführt werden, ist es bequemer, eine einzige Transformationsfunktion zu verwenden und sie in der Reihenfolge aufzulisten, wie folgt:

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px fest2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: übersetzen3d(0,　0,)　60px) rotate3d(0,　1, 0,　-60deg) scale3d(1,　1,　2);　/*　Chrome, Safari, Opera　*/
　　　　transform: übersetzen3d(0,　0,)　60px) rotate3d(0,　1, 0,　-60deg) scale3d(1,　1,　2);　
}

3D-Transformationen

Der nachstehende Tisch gibt eine kurze Übersicht über alle3D-Transformationsfunktion.