Giro de 360º con CSS3

Hasta la llegada de CSS3 la posibilidad de girar elementos era algo compleja y, por lo general, debíamos recurrir a JavaScript. Al dar clases de diseño Web, los alumnos me suelen preguntar si no hay una manera más moderna de resolver esta necesidad y la respuesta viene dada por una propiedad incorporada en CSS3.

Ahora, mediante la propiedad transform podremos establecer giros de la cantidad de grados que deseemos.

Lo que debemos tener en cuenta que este tipo de transformación no implica que sea necesaria una animación, ya que podremos encontrar casos en los cuales necesitaremos que el elemento esté girado de manera predeterminada. No obstante esto, en este caso veremos como trabajar con una animación.

En el ejemplo que veremos a continuación trabajaremos sobre un elemento div que tendrá la clase girar y cuando pasemos por encima con el mouse hará un giro de 360º en un tiempo de 3 segundos:

div.girar
{
width:250px;
height:250px;
background-color: blue;
transition: 3s;
-moz-transition: 3s;
-webkit-transition: 3s;
-o-transition: 3s;
/* Código by @damiande */
}

div.girar:hover
{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
/* Código by @damiande */
}

Como vemos, rotate recibe los grados que deseamos rotar y al pasar con el mouse se activarán las reglas para el :hover de la clase girar.

También podemos ver que en el origen se agregó la propiedad transition, con sus respectivos modificadores para compatibilidad. Esta opción nos permitirá ver una animación más suave en los navegadores compatibles. Establecimos un tiempo de 3 segundos para que el giro sea lento, pero si bajamos este tiempo, todo ocurrirá más rápido.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

4 Comentarios en “Giro de 360º con CSS3
  1. Edwin Corona dice:

    Hola

    Muy interesante.
    Funciona en Mozila, Safari, Chrome y Opera.
    ¿Que hay de Internet Explorer y Netscape Navigator?

    Saludos

  2. isaac dice:

    excelente! muchas gracias! una pregunta para hacer que siempre este girando sin pasar el mouse? osea en un bucle infinito?

Deja un comentario

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

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.