Understanding CSS 3D Transforms (CSS 3D – 1)

Bevel, Dropshadow, Gloss and Glow are designers chocolate-bar - everybody knows they should be avoided, but sometimes we can't resist. The biggest calorie-bomb is everything 3-D. Ahhh 3D - think of all the things it could make possible for us: palettes appearing out of the deep like spaceships, unfolding their menus like roboter-arms, then gliding majestically into the orbit...

Considered a curiosity for nerds by the most, right now a working draft for 3-dimensional transformation of css-elemets is proposed to the W3C and this draft is promising: open the example below to see what can be achieved with 4 divs (no further javascript necessary):

Anyway, before you launch your editor to build the ultimate startrekmatrixminorityreport-navigation you alway dreamt of since you pinned this millenium-falcon poster onto your wall at the age of 14: of course there's a catch. As it's only a draft right now, browser-support is still homeopathic. To be concrete: Safari on iPad, iPod-Touch and Leopard. But this could change soon: expect most webkit-based browsers to catch up one by one over the next time. Especially developers for mobile platforms will benefit from more options in their arsenal, so they should listen carefully. I'll try to give a short overview of the current state of CSS 3D-Transformations in this mini-series. This first part is mainly about the basic CSS 3D-properties. In the second part I will talk about transformation matrixes. And in the last part we will learn about higher mathematics (Quaternions anybody?) and natural object rotation.

My DIVs in 3D???

The purpose of CSS 3D transformations is to allow the designer the manipulation of DOM-Objects not only in the plane (x, y, top, left, right, bottom), but in 3-D space (z) as well. You may think of this as some gimmick without substance but, used properly, it can add value. CSS-3D Transformations can, especially when used in conjunction with CSS-Transitions, help to structure Interfaces into different sections and make the transition between this sections more comprehensible.

What's more: I prefer having a lot of tools in my box. If a utility helps to enrich a user-experience it is welcome. In particular I'm thankful for every instrument that supports me in budgeting the precious commodity screen-estate on mobile devices.

The Situation

To be able to see the examples you will need a browser that is able to understand CSS 3D-transformations. Currently this are:

• Safari on MacOSX 10.6
• Webkit Nightly Build on MacOSX <10.6
• Safari Mobile on iPad, iPod-Touch & iPhone

Unfortunately the current Nightly build of Webkit for Windows doesn't support CSS3D-Transformations. I can only recommend to check from time to time wether the functionality has changed.

As you can see, currently CSS 3D Transformations are of particular interest to developers who do HTML-apps for the iDevice-Platform.

Which Browsers will Support The Standard?

It's most likely other webkit-based browsers will be the first to catch up. Besides Apples Safari, Webkit is also the foundation for Google's Chrome. Webkit may be not very dominant on the desktop, but on smartphones it is the prevalent rendering-engine, although the difference between implementations can be substancial.

Step by Step Walkthrough:

Designers with a background in 3-D Animations should not have too high expectations: the standard doesn't know anything about light sources, cameras, or shaders. 3D-Navigation is very limited, as viewpoint-rotation is not possible. On the other hand: even designers who already have been involved into 3-D may find some of the concepts quite abstract and unintuitive (what are transformation-matrixes?) and the interaction of the 3D-Element and other elements on the page is not always feasible (how will floats behave? What are margins?).

Before we carry on, I recommend to play with this demo. You can manipulate the CSS-properties independently and watch the result in real-time. Hopefully this will give you a better understanding of the abstract subject.

A side note: we can learn something about the disappointing SVG-implementation in Safari in this example: all background-images are svg, so you should expect them to be razorsharp all the time. Unfortunately this isn't the case, as Safari only uses a cached bitmap for distortion.

So let's start with our html-document:

The next thing we want to do is to rotate, scale and reposition div#child. Before we can do this, we have to tell div#parent that its children now live in 3-D space (notice the vendor-specific prefix "-webkit-" prepended to all CSS-properties:

Both declarations set the stage. None of them will cause any changes to the appearance of "parent". The only thing we do here is determine how children of "container" will be rendered.

The concept behind perspective is not very intuitive. Imagine a pyramid between the viewer and the z-plane. "perspective" would be the distance between the top of the pyramid and the z-plane. "Perspective" can be compared to the field viewing angle of your camera. The higher "perspective", the steeper the pyramid, so the transformed objects size will be nearer to it's untransformed size. A rule of thumb: values from 700 to 1000 will be recognized as "normal" and are a good starting-point.

"perspective-origin" determines the coordinates for the perspective-centers x- and y- values. It is like positioning a camera: "perspective" is the field-viewing-angle, "perspective-origin the x- and y-coordinates of the camera. Here we do use a percent-value, but absolute (px, cm, in, em etc..) or other relative (left, top, right, bottom, center) units would be allowed as well.

After setting the stage, we will now transform the child-element:

• We want the origin of the transformation to be positioned at the center.
• We want the Element to be moved 50px along the x-, 40px along the y- and 80px along the z-axis.
• Afterward we will double its width and rotate it 45 degrees around its y-axis
• We want the children of the Element to live in the same 3D coordinate-space.

transform-origin:

This is the center for the transformation. Units allowed are the same as for "perspective". Values for "z" are allowed, but didn't have any effect in my experiments.

transform: ...

Here we will group all transformations:

• perspective(val)
• translate3d(x, y, z)
• scale3d(x, y, z)
• rotate3d(x, y, z, winkel)

transform: perspective(val)

A kind of short-version of "perspective:val". This time it is not applied to the container but directly to the child. In contradiction to "pespective" it will alter the appearance of the object, not its children. If the container does have a "perspective" declaration, both values will multiply.

transform: translate3d(x, y, z):

Moves the object along the corresponding axis.

transform: scale3d(x, y, z)

Will scale the object along the corresponding axis. A value of 1 will preserve the original value. A need for scaling along the z-axis seems unnecessary first, as DOM-Elements usually do not have any depth. Anyway situations are possible where a z-scaling can be reasonable, for example if you arrange a group of divs in cube-form. This group could indeed be scaled z-wise.

transform: rotate3d(x-vektor, y-vektor, z-vektor, angle)

A rotation around a vector-axis. First we will determine a vector by setting its x, y, and z values. Its important to know that not the values themselves are important, but the relation of the values: rotate3d(5, 6, 10, 45deg) will give the same effect as rotate3d(50, 60, 100, 45 deg). The 4th value determines the angle of the rotation. Degrees(deg) and radian(rad) are allowed as units for the angle. I. e. rotate3d(0, 1, 0, 90deg) will rotate he object 90 degrees around the y-axis.

-webkit-transform-style:

One more CSS-property that will have only an effect on its children. The 2 possible values are "preserve-3d" and "flat" with "preserve-3d" being default.

• "preserve-3d" will treat child elements as 3-D objects living in the same coordinate-space.
• "flat" will treat child-elements as texture that are mapped flat onto their parent.

There are some more transformations I didn't mention because I think they are fairly self-explaining:

• translateX(x)
• translateY(y)
• translateZ(z)
• rotateX(angle)
• rotateY(angle)
• rotateZ(angle)
• backface-visibility: visible | hidden

So there's only transformation-matrix matrix3d(…) left, which I will discuss in part 2 of this series.