La función matrix() es una función incorporada que se utiliza para crear una array de transformación 2D homogénea.
Sintaxis:
matrix( a, b, c, d, tx, ty )
Parámetros: esta función acepta seis parámetros, como se mencionó anteriormente y se describe a continuación:
- a, b, c, d: estos parámetros se utilizan para describir la transformación lineal.
- tx: este parámetro se utiliza para describir la traslación lineal en el eje x.
- ty: este parámetro se utiliza para describir la traslación lineal en el eje y.
El siguiente ejemplo ilustra la función matrix() en CSS:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS matrix() function
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
.GFG {
transform-origin: 0 0;
transform: matrix(0.8, 0.8, -0.8, 0.8, 250, -30);
font-size: 26px;
font-weight: bold;
width: 250px;
padding: 20px;
background: green;
color: white;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS matrix() function</h2>
<br>
<br>
<div class="GFG">
Welcome to GeeksforGeeks
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la función matrix() se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera