CSS3 - 2d Transformationen
2D-Transformationen werden verwendet, um die Elementstruktur als Verschieben, Drehen, Skalieren und Neigen zu ändern.
Die folgende Tabelle enthält allgemeine Werte, die in 2D-Transformationen verwendet werden.
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | matrix(n,n,n,n,n,n) Wird verwendet, um Matrixtransformationen mit sechs Werten zu definieren |
| 2 | translate(x,y) Wird verwendet, um das Element zusammen mit der x-Achse und der y-Achse zu transformieren |
| 3 | translateX(n) Wird verwendet, um das Element zusammen mit der x-Achse zu transformieren |
| 4 | translateY(n) Wird verwendet, um das Element zusammen mit der y-Achse zu transformieren |
| 5 | scale(x,y) Dient zum Ändern der Breite und Höhe des Elements |
| 6 | scaleX(n) Wird verwendet, um die Breite des Elements zu ändern |
| 7 | scaleY(n) Wird verwendet, um die Höhe des Elements zu ändern |
| 8 | rotate(angle) Wird verwendet, um das Element basierend auf einem Winkel zu drehen |
| 9 | skewX(angle) Wird verwendet, um Skew-Transformationen zusammen mit der x-Achse zu definieren |
| 10 | skewY(angle) Wird verwendet, um Skew-Transformationen zusammen mit der y-Achse zu definieren |
Die folgenden Beispiele zeigen das Beispiel aller oben genannten Eigenschaften.
20 Grad drehen
Boxdrehung mit 20 Grad Winkel wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
-20 Grad drehen
Boxdrehung mit -20 Grad Winkel wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
X-Achse neigen
Boxdrehung mit Schräg-x-Achse wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Schräge Y-Achse
Boxdrehung mit Schrägstrich-y-Achse wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Matrixtransformation
Boxrotation mit Matrixtransformationen wie unten gezeigt -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Matrix transformiert sich in eine andere Richtung.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -