Friday, May 8th, 2009

3D Cube using new CSS transformations

Category: CSS

Paul Hayes has been playing with CSS transformations and making 3D cubes:

The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object. Currently only supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform (documentation) and Safari 3.2+ -webkit-transform (documentation).

This resulted in:

A 3D cube created with CSS
Supported browsers: Safari 3.2+, Google Chrome, Firefox 3.5+

Experiment with multiple cubes and CSS transitions, still no JavaScript
Supported browsers: Safari 4+, Google Chrome

WebKit initially put this in (iPhone needed it after all!) and it will be interesting to see what users come out of it. The full CSS for the simple example is below:

  1. .cube {
  2.         position: relative;
  3.         top: 200px;
  4. }
  6. .rightFace,
  7. .leftFace,
  8. .topFace div {
  9.         padding: 10px;
  10.         width: 180px;
  11.         height: 180px;
  12. }
  14. .rightFace,
  15. .leftFace,
  16. .topFace {
  17.         position: absolute;
  18. }
  20. .leftFace {
  21.         -webkit-transform: skewY(30deg);
  22.         -moz-transform: skewY(30deg);
  23.         background-color: #ccc;
  24. }
  26. .rightFace {
  27.         -webkit-transform: skewY(-30deg);
  28.         -moz-transform: skewY(-30deg);
  29.         background-color: #ddd;
  30.         left: 200px;
  31. }
  33. .topFace div {
  34.         -webkit-transform: skewY(-30deg) scaleY(1.16);
  35.         -moz-transform: skewY(-30deg) scaleY(1.16);
  36.         background-color: #eee;
  37.         font-size: 0.862em;
  38. }
  40. .topFace {
  41.         -webkit-transform: rotate(60deg);
  42.         -moz-transform: rotate(60deg);
  43.         top: -158px;
  44.         left: 100px;
  45. }

Posted by Dion Almaer at 7:52 am

4.1 rating from 58 votes


Comments feed TrackBack URI

You can use the matrix filter in IE to do these kinds of transforms, as well. There’s no transform functions, so it can be a little confusing.

Comment by jonathansnook — May 8, 2009

no you cannot do this in IE using the matrix filter.
the matrix filter only does scaling and rotating in the plane of the screen.
no perspective, no skewing. no fun.

Comment by Lon42 — May 8, 2009

Orthogonal 3d is excellent for diagrams and charts – but for anything else people will probably want to have real perspective which of course isn’t hackable through skewX/Y.

Comment by rasmusfl0e — May 8, 2009

@rasmusfl0e: and that is exactly what safari on iphone does. for a demo view or
both only on iphone.
i expect non-iphone-safari to follow. lthough it’s been some time already…

Comment by Lon42 — May 8, 2009

I was curious to see how scollbars would render with the -moz-transform(skew) property when overflow:scroll was set. In the case of Firefox, it turns out not too well, as can be seen here:

For those interested, I have raised a bug with Mozilla (#492155)

Comment by bogphanny — May 8, 2009

It appears that my above-mentioned bug only affects the Mac release of Firefox.

Comment by bogphanny — May 8, 2009

@Lon42: a shame that its only the shapes thats rotated with perspective – the images aren’t perspective correct. To bad.

Comment by rasmusfl0e — May 8, 2009

I don’t think that’s bad, makes it repeatable, pretty cool

Comment by Jadet — May 9, 2009

I wonder who will create a JS parser able to add on the fly css rules via -all-transform or other “same but prefix” rules … I love these features but the idea to write -boring-thesamething for each browser is a bit annoying, isn’t it?

Comment by WebReflection — May 11, 2009

@Lon42: Yes you can do this in IE. Like the CSS transforms used here, IE’s matrix filter does affine transformations and a such you can do skews, rotations, translations, … and a mix of them all.

Comment by p01 — May 11, 2009

yep. i’ve used this to make a cubic panaroma viewer in safari on iphone.

my example uses javascript to manipulate the cube, but the cube itself is just css.

Comment by bunnyhero — May 11, 2009

Leave a comment

You must be logged in to post a comment.