Rotación de Elementos en 2D y 3D
Podemos utilizar la función rotate()
para rotar elementos. Los valores positivos rotan el elemento en sentido horario, mientras que los valores negativos lo hacen en sentido antihorario. El ángulo de rotación se especifica normalmente en grados (deg
), siendo el valor predeterminado 0deg, lo que indica que no hay rotación. Otras unidades aceptables para los ángulos de rotación son vueltas (turn
) y radianes (rad
).
Ejes del elemento
Para comprender cómo funciona la rotación, es necesario entender el concepto de ejes del elemento. Existen tres ejes:
- El eje x es horizontal, va de izquierda a derecha;
- El eje y es vertical, va de arriba hacia abajo;
- El eje z es perpendicular a la pantalla, apuntando hacia el espectador.
Dirección de rotación
Por defecto, la propiedad rotate()
rota el elemento alrededor del eje z. Sin embargo, también podemos aplicar rotación alrededor del eje x y del eje y utilizando los siguientes valores:
transform: rotateX(angle);
transform: rotateY(angle);
Ejemplo 1
Considere el siguiente código de ejemplo, donde aplicamos diferentes ángulos de rotación para demostrar la rotación alrededor del eje z:
index.html
index.css
Ejemplo 2
En este ejemplo, se explora la rotación alrededor de los ejes z, x y y:
index.html
index.css
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.04
Rotación de Elementos en 2D y 3D
Desliza para mostrar el menú
Podemos utilizar la función rotate()
para rotar elementos. Los valores positivos rotan el elemento en sentido horario, mientras que los valores negativos lo hacen en sentido antihorario. El ángulo de rotación se especifica normalmente en grados (deg
), siendo el valor predeterminado 0deg, lo que indica que no hay rotación. Otras unidades aceptables para los ángulos de rotación son vueltas (turn
) y radianes (rad
).
Ejes del elemento
Para comprender cómo funciona la rotación, es necesario entender el concepto de ejes del elemento. Existen tres ejes:
- El eje x es horizontal, va de izquierda a derecha;
- El eje y es vertical, va de arriba hacia abajo;
- El eje z es perpendicular a la pantalla, apuntando hacia el espectador.
Dirección de rotación
Por defecto, la propiedad rotate()
rota el elemento alrededor del eje z. Sin embargo, también podemos aplicar rotación alrededor del eje x y del eje y utilizando los siguientes valores:
transform: rotateX(angle);
transform: rotateY(angle);
Ejemplo 1
Considere el siguiente código de ejemplo, donde aplicamos diferentes ángulos de rotación para demostrar la rotación alrededor del eje z:
index.html
index.css
Ejemplo 2
En este ejemplo, se explora la rotación alrededor de los ejes z, x y y:
index.html
index.css
¡Gracias por tus comentarios!