La función matrix3d() es una función incorporada que se utiliza para aplicar una transformación para crear una transformación 3D como una array homogénea de 4×4.
Sintaxis:
matrix3d( a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4 )
Parámetros: Esta función acepta 16 parámetros como se mencionó anteriormente y se describe a continuación:
- a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: estos parámetros se utilizan para mantener el valor de la transformación lineal.
- a4, b4, c4: estos parámetros se utilizan para mantener el valor de la traducción.
El siguiente ejemplo ilustra la función matrix3d() en CSS:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
CSS matrix3d() function
</title>
<style>
.GFG {
transform: matrix3d(
0.6, 0.1, 0.7, 0,
-0.5, 0.8, 0.1, 0,
-0.6, -0.5, 0.5, 0,
0, 0, 0, 1
);
font-size:26px;
font-weight:bold;
width:250px;
padding:20px;
background: green;
color: white;
font-family: sans-serif;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>CSS matrix3d() function</h2>
<br><br>
<div class="GFG">
Welcome to GeeksforGeeks
</div>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la función matrix3d() se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera