Chris Walton

Doing a barrel roll with Google

Google are never scared to get creative, as seen with their regular Google doodles, but sometimes they just get creatively playful just because they can with hidden easter eggs. When you search for “do a barrel roll” the result page will roll around and do a “barrel roll”.

How did Google make itself spin? The feat is made possible with a dash of CSS3, specifically the features of CSS Animation and CSS Transform. CSS Transforms can be used to rotate, translate, scale, or skew the  HTML of a page and combined with a CSS Animation technique the page spins.

These CSS3 features are still in the experimental stage, and as such the browsers that support them require vendor prefixes to use them. The CSS transfors is widely supported by Firefox (-moz-), Chrome/Safari/iOS/Android (-webkit-), but CSS animation isn’t yet supported in Opera (-o-) and Internet Explorer (big surprise).

Other Google easter eggs have included “tilt”, which is similar to the barrel roll but where the page ‘leans’ to the right.