Erklärung
Die folgenden 6 Eigenschaften kann man matrix() mit numerischen Werten versehen. scale erwartet einen Multiplikator, translate einen Pixelwert ohne die Einheit px. Die beiden skew-Werte erwarten numerische Werte, die nicht den Gradzahlen entsprechen.
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()
Am einfachsten man probiert es aus: matrix testen / w3schools
In den folgenden blauen Beispielen wurden die scale und translate Eigenschaften nicht verändert, sondern die scale-Werte sind 1, und die translate-Werte: 0.
Lediglich die Werte für skewX und skewY wurden verändert. Die Werte stehen in den Boxen. Anhand der Beispiele, sieht man die Auswirkungen.
Zum Vergleich haben die roten Boxen skew-Eigenschaften mit Grad Werten deg bekommen, die Werte stehen in den Boxen.
div {
width: 50px;
height: 50px;
border: 1px solid #000;
margin-left: 50px;
background-color: rgba(4, 84, 154, 0.51);
}
div[class^="skew"]{background-color: rgba(181, 11, 44, 0.55)}
.box2 {
transform: matrix(1, 0, 1, 1, 0 ,0)
}
.skew2{transform: skewX(45deg)}
.box4 {
transform: matrix(1, 1, 0, 1, 0 ,0)
}
.skew4{transform: skewY(45deg)}
.box6 {
transform: matrix(1, .5, -0.5, 1, 0 ,0)
}
.skew6{transform: skew(-25deg, 25deg)}
.box8 {
transform: matrix(1, -1, 1, 1, 0 ,0)
}
.skew9{transform: skew(60deg, -60deg);}