I've been avoiding 3D simply because of the lack of support (IE9 and Opera do not support 3D - see this site for the current support matrix). However, for fun, I decided to try it out and see how it works. From a UI perspective, the carousel pattern seems to be a good place to use 3D. As I was looking for examples, I found this site which has an implementation.
As I looked over the code, I noted several things:
- The order of the transform is important. The wrong order will cause elements to align in unexpected places.
perspectivestyle will affect the look of the 3D effect. Most likely, setting it on a container and using
transform-style: preserve-3dwill be desirable.
transform-origincan make it a lot easier to rotate elements in 3D space.
In my sandbox, I created a test to tinker with the different 3D styles to see how they worked. The basic setup is to create a wrapper DIV which will have the
perspectivestyle set to some value between 200px and 1000px. Each child DIV will then use
transform-style: preserve-3dto inherit the perspective. Additionally, the
transform-originis set so all transforms occur relative to the center of the element but behind the element (by default it is -100px behind each element). Once all the elements have a common transform point established, a rotation transform is applied on one of the DIVs on a specific axis. In this example, the "outer" DIV is rotated around the x-axis, the "inner" DIV is rotated around the z-axis, and the "box" DIVs are rotated around the y-axis.
The result enables rotating all the elements around the established point of origin on the different axises. There are probably different ways to achieve the same result. The carousel example I linked to above translated the elements on the z-axis to position them properly in space. I prefer using the
transform-originstyle since the browser does the math for me and makes the code much simpler write and maintain.
While probably not something to use extensively, 3D transforms certainly can add some nice transition effects. If its used appropriately, the transitions could degrade well enough that users visiting with browsers that do not support 3D will still be able to access content. This might require some creative coding or even browser support checks. However, over time, the features will become mainstream and enable a whole new dimension to page design.