SumTips
SumTips
Tips 'n Tricks

Make Any Site Do a Barrel Roll With CSS3

Print View Mobile View

Did you search Google for “do a barrel roll”? If not, do that (you must use Google Chrome, Firefox or Safari. No IE.) and then come back here.

Did that blow your mind off? That’s a new Google Easter egg (some more).

Now here’s how you can make your site, or any site for that matter, do a barrel roll with a bit of CSS3 magic.

SumTips Barrel Roll Demo

First create a new html document with the standard <head> and <body> tags. Then add an iframe in the document, specifying the webpage URL you wish to apply the effect to between the <body>...<body> tags:

<iframe src="http://sumtips.com"/>

Next is the CSS3 for the effect. You can either add it in the same page, by including it inside the <head> tags, or import it as an external file. The demo, at the end of the page has the CSS3 in the same page.

@-webkit-keyframes roll {
    from { -webkit-transform: rotate(0deg) }
    to   { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes roll {
    from { -moz-transform: rotate(0deg) }
    to   { -moz-transform: rotate(360deg) }
}

@keyframes roll {
    from { transform: rotate(0deg) }
    to   { transform: rotate(360deg) }
}

body {
    -moz-animation-name: roll;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 1;
    -webkit-animation-name: roll;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 1;
}

html,body,div,iframe {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
}

iframe {
   width: 100%;
   border: 0;
}

View: Demo | via wesbos

Related tips:

2 thoughts on “Make Any Site Do a Barrel Roll With CSS3”

Comments are closed.