Recordemos lo difícil que era mostrar un elemento rotado en una pagina web, a veces teníamos que recurrir a una imagen predefinida y estática para mostrar este tipo de estilos, además de gastar un poco nuestro ancho de banda en el servidor.

Con CSS3 eso queda en el pasado, ahora podemos rotar elementos de manera muy fácil y aquí van a aprender Como rotar elementos con transform de CSS3.

La sintaxis básica para rotar un elemento es:

transform: rotate( -5deg );

Aquí estamos diciendo que rotaremos a -5 grados, recuerden poner junto al numero el “deg”, que es la unidad que utilizamos para decirle cuantos grados se rotara.

Otra cosa importante son, las extensiones propietarias, que explique en el tutorial Como dividir un bloque en columnas con column-count de CSS3, ya que se trata de una propiedad de CSS3 nueva.

Supongamos que quieren rotar un div con id=”midiv”, entonces tendríamos que poner algo como:

#midiv
{
      transform: rotate(-5deg);

      -webkit-transform: rotate(-5deg);

      -moz-transform: rotate(-5deg);

      -o-transform: rotate(-5deg);
}

Yo se que son demasiadas veces lo mismo, pero cada navegador seleccionara la que le corresponde, forzosamente se tienen que poner todas o no les funcionara en el navegador correspondiente.

Así como el id del div, también es aplicable a class y etiquetas especificas como cualquier otra cosa en CSS.

Espero y este tutorial corto les sirva para crear mejores estilos en sus paginas web y comenten que les pareció o que podemos mejorar, Gracias.

Luis Antonio Gomez Prieto

Luis Antonio Gomez Prieto

Co-founder and Fullstack developer at @wavecodela

7 comentarios en “Como rotar elementos con transform de CSS3

  1. no se si ya lo han echo pero si pruebas a hacer un rotate(270deg) con un tamaño de fuente grande se te como las palabras salen del contenedor y dependiendo del lugar salen de la pantalla y no se me ocurre como arreglarlo para que se vea lo que falta (claro sin usar position, top o left), alguna idea?. A y gracias por el tutorial!

    1. ¿Que es lo que intentas hacer?, si entendi bien, quieres rotar un texto con un tamaño de fuente muy grande, pero se sale del contendor, si es así, es muy obvio, tendrías que jugar con posiciones y posiblemente margenes, pero puedes intentar sobreponer el texto con z-index y postion:absolute;, saludos.

      1. si ya sabia eso pero yo quiero ver si es posible no usar position porque mi paguina no tiene un tamaño definido de los elementos sino que lo trabajo con % para que cambie según cambie el tamaño de la ventana del navegador pero si lo trabajo con position le estoy dando un lugar fijo en el navegador(hasta donde yo se claro).

  2. Hola, he querida hacer rotar un elemento (botón), de mi web y aplico este código y no rota por nada.

    #midiv:hover {
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    }

    Utilizo Google Chrome como navegador…
    Ayuda por favor… no se que hacerle

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar