En esta entrada veremos como realizar rotaciones sobre cualquier elementos HTML empleando la propiedad transform
de CSS3.
La propiedad transform
en CSS3 permite aplicar transformaciones 2D y 3D a los elementos HTML en una página web; en esta entrada nos interesa aprender a realizar una de estas transformaciones, que son las rotaciones; las propiedades posibles a emplear son las siguientes:
rotate(ángulo)
: Define una rotación en su espacio 2D.rotate3d(x,y,z,ángulo)
: Define una rotación 3D en todos los ejes.rotateX(ángulo)
: Define una rotación 3D alrededor del eje de las X.rotateY(ángulo)
: Define una rotación 3D alrededor del eje de las Y.rotateZ(ángulo)
: Define una rotación 3D alrededor del eje de las Z.
Consideraciones
- El ángulo debe de ser definido en grados (
deg
por sus siglas en inglés). - Es recomendable utilizar los prefijos de los navegadores web para garantizar su compatibilidad.
- Con todas las propiedades vistas anteriormente es posible definir las rotaciones en un espacio 2D y 3D según un punto de origen definido por la propiedad
transform-origin
.
Definiendo una regla en CSS para las transformaciones
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 en adelante*/ -webkit-transform:rotate(7deg); /* Opera, Chrome, y Safari */ }
Ejemplos de rotaciones sobre elementos
En todos los ejemplos se aplicarán rotaciones a los div
contenedores de las imágenes desde los 0 grados a los 360 grados en un ciclo infinito con ayuda de un poco de JavaScript.
rotate(angulo)
:
Con la propiedad rotate
es posible definir las rotaciones en un espacio 2D; según el signo (positivo o negativo) del ángulo especificado puede ocurrir una de las siguientes condiciones:
- Sentido Horario o hacia la derecha si el ángulo es positivo.
- Sentido Antihorario o hacia la izquierda si el ángulo es negativo.
Primero veremos un ejemplo de lo anterior; básicamente consiste en aplicar las rotaciones de un par de imágenes en sentido horario cuando el grado es positivo y en sentido antihorario en caso contrarío:
-
Rotaciones horarias con un grado positivo:
Rotaciones Horarias
rotate() - Rotaciones antihorarias con un grado negativo:
Rotaciones Antihorarias
rotate()
rotateX(ángulo)
, rotateY(ángulo)
y rotateZ(ángulo)
:
Cómo pudieron haberse dado cuenta, el nombre de la propiedad indica el eje afectado por la rotaciones:
-
Rotación en el eje X
Rotación en el eje X
rotateX() - Rotación en el eje Y
Rotación en el eje Y
rotateY() - Rotación en el eje Z
Rotación en el eje Z
rotateZ()
rotate3d(ángulo)
Ahora aplicaremos la rotación en los tres ejes con una sola propiedad:
-
Rotación en los ejes X, Y y Z
Rotación en los ejes X, Y y Z
Si quisiéramos que el elemento sólo rotará en el eje de las X con la propiedad rotate3d()
podríamos hacer lo siguiente:
rotateX(angulo)
es equivalente a rotate3d(1, 0, 0, ángulo)
.
Puedes leer más sobre esta propiedad en el sitio de Desarrolladores de Mozilla.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter