Hacker News new | past | comments | ask | show | jobs | submit login
Clever CSS Easter Egg: Search Google For “Tilt” Or “Askew” On Your Smartphone (thenextweb.com)
70 points by jeffwidman on April 6, 2011 | hide | past | favorite | 16 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..? :-(


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!


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


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


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


Doesn't work on iPhone 4.


It does for me!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: