Software Development

Make anything barrel roll

If you type "do a barrel roll" into Google, the page rotates. That's nice but with this one-liner we can do it on any site we wish.

The online universe is falling all over itself this morning with news that Google can rotate a page.

While that's nice, let's do it to any page we want. After you load a page, copy and paste the following code into the address bar:

javascript:function rotateit(x){x = parseInt(x);document.body.setAttribute('style', ' -moz-transform: rotate('+x+'deg); -moz-transform-origin: 50% 50%; -webkit-transform: rotate('+x+'deg); -webkit-transform-origin: 50% 50%; -o-transform: rotate('+x+'deg); -o-transform-origin:50% 50%; -ms-transform: rotate('+x+'deg); -ms-transform-origin: 50% 50%; transform: rotate('+x+'deg); transform-origin: 50% 50%;');}for(i=0;i<=360;i++){setTimeout("rotateit("+i+")",i*40);}void(0);

There we go, any page can be rotated (tested in Chrome at this point) and you can amuse your friends for a few seconds.

It turns out that since Firefox 6, pasting javascript into the address bar is not allowed — but we can get around this by creating a bookmark that does it for us.

Simply copy the code example above and paste it into the location field of a new bookmark. Add it to your bookmark bar and now you have a button that will rotate anything you like.

After testing this on Safari, it looks like Safari users are out of luck.

About

Some would say that it is a long way from software engineering to journalism, others would correctly argue that it is a mere 10 metres according to the floor plan.During his first five years with CBS Interactive, Chris started his journalistic advent...

11 comments
aphrodizzy
aphrodizzy

it's very slow with opera, think it crashed or suffered from vertigo so I'm not barrel rolling with this browser anytime soon.

blissmanna
blissmanna

javascript:(function(){var%20newSS,%20styles=':visited%20{display:%20none}';%20if(document.createStyleSheet)%20{%20document.createStyleSheet(%22javascript:'%22+styles+%22'%22);%20}%20else%20{%20newSS=document.createElement('link');%20newSS.rel='stylesheet';%20newSS.href='data:text/css,'+escape(styles);%20document.documentElement.childNodes[0].appendChild(newSS);%20}%20})();

Chaz Chance#
Chaz Chance#

When you paste the code into address bar in IE 9, the "javascript: " doesn't paste. So after pasting, press home to get to the beginning, then type the missing bit yourself. Simples! Forget the bookmark part, though.

jasondlnd
jasondlnd

Create a bookmark in your FF toolbar and it works on any page at a click of a mouse. As it's been stated previously, the code does not work in IE 8 or 9. Thanks for the post, Chris.

Michael Jay
Michael Jay

very cool, does not seem to like long pages like the one we are on but short pages are very interesting. As always, watch your altitude when rolling.

geekGirlFri
geekGirlFri

It was a Wordpress site - should that matter?

HAL 9000
HAL 9000

However it doesn't work in IE, Opera or Safari. Col ;)

Chris Duckett
Chris Duckett

Works fine on multiple WebKit browsers I tried, just added the bookmark code for Firefox. Haven't attempted IE yet, it's next on the list. But I am not counting on it performing at all.

Chris Duckett
Chris Duckett

to stop IE replacing the body with a number. Worked in IE10, not IE8, and I do not have an IE 9 on me to see at the moment.

C-3PO
C-3PO

Just tried it here and it didn't work on this page... even in a favorite.