CSS3 HTML5

Los nuevos estándares para el diseño y desarrollo web y Móvil

Capacitación HTML5

Giro de 360º con CSS3

| 4 Comentarios

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 css3html5.com.ar */
}

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 css3html5.com.ar */
}

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.

¿Te ha resultado útil este tutorial? ¿Te gustaría aprender más sobre CSS3?

Autor: Damián

Escribió cuatro libros, relacionados con sistemas operativos, hardware y desarrollo web, entre ellos se destaca Webmaster Profesional (editado en el año 2009) y HTML 5 – Entienda el cambio, aproveche su potencial lanzado en el 2011 en formato papel y en el 2012 en versión ebook. Se ha desempeñado como editor de libros relacionados con informática. Ha realizado trabajos de edición en la revista Users Digital Design, para la cual participa también escribiendo notas sobre diseño y desarrollo web. Ha colaborado como autor en la revista Dr. Max, Phone Users y en diversas colecciones de fascículos (Universo PC y 1000 Ideas PC, entre otras). Escribe contenidos para diversos medios online, incluyendo el sitio RedUSERS.com. Es consultor y especialista en desarrollo web, con amplio conocimiento en HTML, CSS, AJAX, PHP y Bases de datos. En la actualidad se destaca su trabajo en la preparación de contenidos relacionados con CSS3 y HTML5. Es profesor y dicta curso de HTML5 y clases en la Carrera de Programador Web en el Instituto IT Master Professional Training, en Buenos Aires (Argentina).

4 Comentarios

  1. Hola

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

    Saludos

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

Deja un comentario

Es requirido que se compelte.*.