Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Rotación de Elementos en 2D y 3D | Transformación de Elementos con CSS
Técnicas Avanzadas de CSS

bookRotació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.html

index.css

index.css

copy

Ejemplo 2

En este ejemplo, se explora la rotación alrededor de los ejes z, x y y:

index.html

index.html

index.css

index.css

copy
question mark

¿Qué unidades se utilizan para especificar el ángulo de rotación?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 3

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.04

bookRotació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.html

index.css

index.css

copy

Ejemplo 2

En este ejemplo, se explora la rotación alrededor de los ejes z, x y y:

index.html

index.html

index.css

index.css

copy
question mark

¿Qué unidades se utilizan para especificar el ángulo de rotación?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 3
some-alt