19 July 2009

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

1 comment:

Raphael said...

it is very beautiful but the sum is greater than 100%
;o)