iPhone 3D CSS Tutorial

iPhone 3D CSS Tutrial

Safari on iPhone is the first Browser that supports the new W3C CSS 3D Transforms Module. Time to have closer look.

How to use this tutorial

To follow this tutorial, you need an iPhone. Google Phone will not work (Nov. 2009).
Here is a list with all examples to open in iPhone.

Please have a look at the interactive qube to get started. You will see how perspective works in 3D CSS.

Viewport

First of all, we want to set the iPhone viewport and enable fullscreen. To make it easier we also disable zoom.

<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

Camera position

3d CSS does *NOT* allow you to set a camera position. It's possible to move,rotat,... the whole scenery, which has the same effect.
But it is possible to perspective and the perspective-origin.

body{
-webkit-transform-style: preserve-3d;
-webkit-perspective: 400;
-webkit-perspective-origin: 55% 50%px;
}

Perspective

Perspective Origin:

Note

If a HTML Element does not have a z-Value, the transformation has no effect.
negative -webkit-perspective values may result in unexpected behaviour.
3D CSS z-Values don't have anything to do with z-index.

Z-Value = Zero

In this example the backside of the Qube has z-Value=0. The size and position of the backside will not change if the the perspective or perspective-origin value is changing.