Rodando con Google y CSS3

La semana pasada se divulgó esta receta para pasar un rato divertido:

  • Entra a Google
  • Escribe “do a barrel roll” en el campo de búsqueda
  • Diviértete con familiares y compañeros de trabajo viendo a Google rodar

A mí me pareció curioso y me puse a investigar qué técnica habían usado para lograr el efecto. Como yo suponía el uso de algún truco complicado de Javascript, me sorprendió mucho descubrir que lo habían logrado casi completamente con CSS. ¡Sí, CSS!.

La especificación de CSS3 define las propiedades necesarias para definir este efecto:

transform: rotate(360deg);
transition: transform 4s ease;

La propiedad transform define una rotación de 360 grados. La propiedad transition indica que la rotación ocurre a lo largo de un intervalo de 4 segundos.  Estas propiedades pueden añadirse a cualquier elemento de la página, por ejemplo:

¡Haz girar Hackerdō!

¡Gira botón!

La especificación también define otras transformaciones, como:

Cambiar de tamaño

Mover

Deformar

Estas transformaciones pueden verse únicamente en navegadores modernos, pero estoy suponiendo que eres un(a) buen(a) chico(a) que no usa Internet Explorer y sí puedes verlos. Si quieres saber más sobre el uso y la compatibilidad de estos efectos, revisa esta página.

Advertencia: El abuso de estos efectos puede distraer o resultar molesto, por eso los botones se desactivan después de aplicar el efecto, actualiza la página si quieres volver a verlos.

Un comentario en “Rodando con Google y CSS3

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s