3D histograms using CSS -moz-transform

Firefox 3.5 includes a new CSS property called -moz-transform. The -moz-transform CSS property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed as this text..

I've used this new property to draw a 3D histogram:

[0,0]

124

99%

[0,1]

95

77%

[0,2]

87

68%

[0,3]

72

54%

[0,4]

60

[0,5]

50

43%

[1,0]

139

78%

[1,1]

137

64%

[1,2]

108

63%

[1,3]

81

[1,4]

67

40%

[1,5]

57

38%

[2,0]

177

59%

[2,1]

137

55%

[2,2]

129

[2,3]

102

40%

[2,4]

80

38%

[2,5]

61

35%

[3,0]

181

58%

[3,1]

167

45%

[3,2]

149

42%

[3,3]

123

33%

[3,4]

117

26%

[3,5]

108

20%

[4,0]

237

45%

[4,1]

194

45%

[4,2]

191

35%

[4,3]

152

26%

[4,4]

123

22%

[4,5]

118

18%

[5,0]

300

40%

[5,1]

235

31%

[5,2]

208

28%

[5,3]

165

23%

[5,4]

149

19%

[5,5]

131

16%

Here is the code for a simple cube:

<-- left pane -->
<div style="position:absolute; -moz-transform-origin: 0px 0px; -moz-transform: translate(300px,200px) rotate(90deg) skew(-45deg); background:gray; font-size:36px; color:white; width:300px; height:40px; border:1px solid black;text-align:right;overflow:hidden;">[0,0]</div>

<-- right pane -->
<div style="position:absolute; -moz-transform-origin: 0px 0px; -moz-transform: translate(340px,160px) rotate(90deg) skew(45deg); background:lightGrey ; font-size:36px; color:white; width:300px; height:40px;border:1px solid black;textalign:right;overflow:hidden;">124</div>

<-- top pane -->
<div style="position:absolute; -moz-transform-origin:0 0; -moz-transform: translate(300px,120px) skew(-45deg, 45deg); background:dimgray ; font-size:18px; color:white; width:40px; height:40px;border:1pxsolid black;text-align:center;overflow:hidden;" title="300">99%</div>

If you don't have firefox 3.5 here a screenshot showing how my browser displays this page (at the top, the same page viewed in Konqueror)

That's it
Pierre