Do A Barrel Roll
If you haven’t yet experienced Google’s “do a barrel roll” trick, simply head over to google.com and enter the phrase “Do a barrel roll.”
If you happen to be using Internet Explorer, unfortunately, this trick won’t work for you—Chrome is the recommended browser for this delightful feature.
For compatible browsers, Google’s page executes a charming in-place spin when prompted with the search query.
Upon witnessing this, you might wonder, “How did they manage to pull that off?” or perhaps speculate, “Does Google now use Flash?” or even humorously quote, “I feel the need… …the need for speed!”
To answer the first question, the explanation is straightforward. Let me walk you through how they accomplished this feat:
Filed under:
- Cascading Style Sheets (CSS)
By now, you’ve likely encountered Google’s “do a barrel roll” feature. If you haven’t yet, visit google.com and type “Do a barrel roll.” Using Internet Explorer?
Unfortunately, this trick won’t work for you; Chrome is recommended for optimal results. Google’s page performs a delightful in-place spin for those using compatible browsers upon entering the search query.
Upon seeing this, you might have wondered, “How did they manage to make that happen?” or questioned, “Has Google started using Flash?” or even joked, “I feel the need… …the need for speed!” The answer to the first question is straightforward. Let me explain how they achieved this:
Check Out: How To Do A Barrel Roll 1000000000000000000000000000?
Step 1: Generate an animation using CSS3
@-moz-keyframes roll {
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes roll {
100% {
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes roll {
100% {
-webkit-transform: rotate(360deg);
}
}
Step 2: Implement it on the body
body{
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}
This technology is quite advanced, requiring us to employ vendor prefixes still, but the code is simple. It’s remarkable how minimal the code needed to achieve this effect is.
If this were exclusively a WebKit-based application, it could have been accomplished in just two lines using a transition.
However, technological standards evolve, and what is currently WebKit-specific might eventually become universal, making this process as straightforward as:
body {
transform:rotate(360deg);
transition: 4s rotate;
}
In the future, Internet Explorer will adopt these standards or phase out, allowing everyone to enjoy fun features like this.
Read More: Do A Barrel Roll 100000000000000000000000000000000000000000000000000000000000000 Times
Since IE doesn’t support it, implementing this across all platforms isn’t feasible. However, it’s a delightful addition for “modern browsers” that support these advancements.
