Clever CSS Easter Egg: Search Google For “Tilt” Or “Askew” On Your Smartphone | Hacker News Reader

Clever CSS Easter Egg: Search Google For “Tilt” Or “Askew” On Your Smartphone

thenextweb.com

70 pointsjeffwidman16 comments

Since this article doesn't have much substance, if you're looking to do something similar, check out this article on CSS rotation transformations.

http://snook.ca/archives/html_and_css/css-text-rotation

Indeed. This crashed my browser (Dolphin HD).

I was hoping that this would automatically retilt the screen using the accelerometer. Alas, it always simply just rotates it a few degrees.

That's a cool idea. Accelerometer support for JS was added to iOS 4.2 [1], so it should be possible to modify the CSS transformations based on the DeviceOrientation [2].

[1] http://www.mobilexweb.com/blog/safari-ios-accelerometer-webs...

[2] http://dev.w3.org/geo/api/spec-source-orientation.html

I'm rather disappointed it doesn't take accelerometer input...

Only works on iPhones and Androids, I suppose. Didn't work on my Nokia C7 (a very competent smartphone..)

Is the term "smartphone" only limited to those platforms now..? :-(

Doesn't work on iPhone 4.

It does for me!

(I'm guessing) google used -webkit-transform css property, does the C7 support that?

PS - And I'm sure this is something they did for fun. They could've done it for chrome/safari as well, but they didn't.

Indeed, it's achieved by adding webkit-specific

  -webkit-transform: rotate(1deg)

CSS transform applied to the body element so it works on the desktop if you use Chrome or another webkit browser.

Not quite sure why they didn't use -moz-transform on Firefox (Gecko) browsers which works the same way.

Keep in mind that "smartphone" is the term TNW used not Google.

Works on HP webOS. Think it is a webkit browser thing.

Yep, WebKit is the engine most commonly used in current smartphone browsers.

I think the C7 browser is Webkit-based...

It looks like the C7 is running an older version of WebKit that doesn't support CSS transitions. It seems to be running v525/3.0 [1] and it looks like transitions were only in nightlies at that point. [2]

[1] http://www.handsetdetection.com/properties/vendormodel/Nokia...

[2] http://www.webkit.org/blog/138/css-animation/#comment-23166

Ah, thanks a lot for the info, and for the link as well - that sheds a better light on some of the oddities I'd noticed in my phone!

Reply on news.ycombinator.com