Monday, June 2nd, 2008

Flipping out over Safari

Category: CSS, Tip

<>p>flip

Thomas Fuchs is having some fun at RailsConf, and sent out a fun use of the new WebKit transformations using the medium of the bookmarklet:

javascript
< view plain text >
  1. javascript:document.body.style['-webkit-transform']='rotate(180deg)';
  2.  
  3. javascript:document.body.style['-webkit-transform']='rotate('+prompt('degrees',180)+'deg)';

Use this bookmarklet (drag to bookmarks bar):

flip

or this one if you want a prompt:

flip2.

Related Content:

Posted by Dion Almaer at 5:01 am
4 Comments

+++--
3.4 rating from 30 votes

4 Comments »

Comments feed TrackBack URI

tobad its only for Safari

Comment by V1 — June 2, 2008

From Simon Willison’s twitter feed:

javascript:(function(){var d=0;setInterval(function() {document.body.style['-webkit-transform']= ‘rotate(‘+ d +’deg)’;d+=1},10)}());

Comment by StevenLevithan — June 2, 2008

This will be great for the iPhone when your orientation doesn’t match the iPhone. For example, when I am hanging from a tree limb upside down, and I try to read my iPhone, it is upside down relative to me. The CSS transforms don’t work for me yet on the iPhone, another week or two I guess. I will try this out on the latest simulator.

Comment by JonathanLeech — June 2, 2008

An interesting side effect after the page has been spun around, is that the search in Safari is looking at originally rendered DOM…man this comment was hard to write while the page was rotating…!

Comment by remy — June 2, 2008

Leave a comment

You must be logged in to post a comment.