This makes your web page do a barrel roll. Just like when you go to Google and type "do a barrel roll".
-
-
Save bengl/4275420 to your computer and use it in GitHub Desktop.
Do A Barrel Roll!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | |
*/ | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function(){var a="-webkit-",b='transform:rotate(1turn);',c='transition:4s;';document.head.innerHTML+='<style>body{'+a+b+a+c+b+c} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "doABarrelRoll", | |
"description": "This rotates the page 360deg, just like Google's Barrel Roll easter egg.", | |
"keywords": [ | |
"animation", | |
"css3" | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
thank you for NOTHING
<h1>fuck</h1>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
According to http://www.w3.org/TR/css3-3d-transforms/#svg-angle you can use "360" instead of "1turn" and save 2 bytes.