Skip to content

Instantly share code, notes, and snippets.

@bengl bengl/LICENSE.txt forked from 140bytes/LICENSE.txt
Created Dec 13, 2012

Embed
What would you like to do?
Do A Barrel Roll!

Do A Barrel Roll

This makes your web page do a barrel roll. Just like when you go to Google and type "do a barrel roll".

function(){
var a="-webkit-", // vendor prefix for Chrome, Safari
b='transform:rotate(1turn);', // the CSS for rotating 360deg
c='transition:4s;'; // the CSS for making the rotation last 4 seconds
document.head.innerHTML // adding a style tag to the <head>
+= '<style>body{' + a + b + a + c + b + c // the combined CSS in the style tag
/*
This actually generates a string that looks like:
"<style>body{-webkit-transform:rotate(1turn);-webkit-transition:4s;transform:rotate(1turn);transition(4s);"
Which obviously is lacking a closing tag and a closing bracket, but luckily browsers are smart enough to figure this out.
It also only has vendor prefixes for WebKit. That's because it turns out Firefox and Opera work just fine without the prefixes here.
*/
}
function(){var a="-webkit-",b='transform:rotate(1turn);',c='transition:4s;';document.head.innerHTML+='<style>body{'+a+b+a+c+b+c}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "doABarrelRoll",
"description": "This rotates the page 360deg, just like Google's Barrel Roll easter egg.",
"keywords": [
"animation",
"css3"
]
}
<!DOCTYPE html>
<title>Foo</title>
<h1>This content should do a barrel roll (after 5s so you can read this).</h1>
<script>
var doABarrelRoll = function(){var a="-webkit-",b='transform:rotate(1turn);',c='transition:4s;';document.head.innerHTML+='<style>body{'+a+b+a+c+b+c}
doABarrelRoll();
</script>
@atk

This comment has been minimized.

Copy link

commented Dec 14, 2012

According to http://www.w3.org/TR/css3-3d-transforms/#svg-angle you can use "360" instead of "1turn" and save 2 bytes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.