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