Monday, September 29th, 2008

iPhone Safari 3D Navigation Menu

Category: iPhone, Mobile

Ben Putman has put together a nice iPhone Safari 3D navigation menu example that shows off the transforms and events available on the latest mobile Safari.

Ben told us:

In thinking of an interesting test, I’ve created a menu that you can rotate across a fixed y-axis with touch, allowing you to spin the menu around and see the depth and back of elements. There are also some examples of how animations can be used as you click and the menu unfolds. I also added a lightbox to examine how one might view some photos although it’s not really practical in this form.

Open up the demo in your iPhone / Touch and also take a peak at the source to see what is going on, with snippets like this:

  1. .second_show {
  2.   -webkit-animation-name: 'second_show';
  3.   -webkit-animation-duration: 1s;
  4. }
  6. @-webkit-keyframes 'second_show' {
  7.   from {    -webkit-transform: translateZ(0px) rotateX(180deg);}
  8.   to {    -webkit-transform: translateZ(100px) rotateX(0deg);}
  10. }
  11. .second_hide {  -webkit-animation-name: 'second_hide';  -webkit-animation-duration: 1s; }
  12. @-webkit-keyframes 'second_hide' {
  13.   from {    -webkit-transform: translateZ(100px) rotateX(0deg);}
  14.   to {    -webkit-transform: translateZ(0px) rotateX(180deg);}
  15. }

Posted by Dion Almaer at 6:42 am

2.1 rating from 69 votes


Comments feed TrackBack URI

Cool! I wonder if a touch sensor on the back off an iPhone would be any improvement? It would keep the screen looking nice and buff at least :)

Comment by RobFrontEndDeveloper — September 29, 2008

i’d like to see the demo unfortunately the links to the demo are broken!

Comment by MohammedAlaa — November 20, 2009

Leave a comment

You must be logged in to post a comment.