La función «rotate3d()» es una función incorporada que se usa para rotar un elemento alrededor de un eje fijo en el espacio 3D.
Sintaxis:
rotate3d( x, y, z, angle )
Parámetros: esta función acepta cuatro parámetros, como se mencionó anteriormente y se describe a continuación:
- x: contiene un número que indica la coordenada x. Su valor se encuentra entre 0 y 1.
- y: contiene un número que indica la coordenada y. Su valor se encuentra entre 0 y 1.
- z: contiene un número que indica la coordenada z. Su valor se encuentra entre 0 y 1.
- ángulo: Mantiene el ángulo de rotación. El ángulo positivo representa una rotación en el sentido de las agujas del reloj y un ángulo negativo representa una rotación en el sentido contrario a las agujas del reloj.
Los siguientes ejemplos ilustran la función de rotar3d() en CSS:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>CSS rotate3d() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.rotate3d_image {
transform: rotate3d(1, 1, 0, 60deg);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS rotate3d() function</h2>
<br><br>
<img class="rotate3d_image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS rotate3d() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.GFG {
font-size:35px;
font-weight:bold;
color:green;
transform: rotate3d(1, 1, 0, 60deg);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS rotate3d() function</h2>
<br><br>
<div class="GFG">Welcome to GeeksforGeeks</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la función de rotar3d() se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera