Skip to content

Instantly share code, notes, and snippets.

@bengl
Forked from 140bytes/LICENSE.txt
Created December 13, 2012 10:00
Show Gist options
  • Save bengl/4275420 to your computer and use it in GitHub Desktop.
Save bengl/4275420 to your computer and use it in GitHub Desktop.
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
Copy link

atk 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.

@Cjmadog
Copy link

Cjmadog commented Jan 12, 2024

thank you for NOTHING

@Cjmadog
Copy link

Cjmadog commented Jan 12, 2024

<h1>fuck</h1>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment