Question

I have to draw 32 rectangles along a circle using html5, css3 and js.
You can see my goal with this image:

.

My designed solution was to create “a for” in js that would generate 32 rectangles each time increasing rotation, coordinates and z-index. I tried but it is too intricate.

Please help me.

Answer 1

Here’s a new version, updated to show the OP’s requirement to have an actual DOM element for each rectangle, and not a single canvas:

var n = 32;

for (var i = 0; i < n; ++i) {
    var d = document.createElement('div');
    var r = 360 * i / n;
    var s = 'translate(200px,200px) rotate(' + r + 'deg) translate(0px, -180px)';

    d.setAttribute('class', 'box');
    d.setAttribute('style', '-webkit-transform:' + s);

    var t = document.createTextNode(i);
    d.appendChild(t);

    document.body.appendChild(d);
}​

working demo at http://jsfiddle.net/alnitak/CFAyf/ which contains some additional (and necessary) CSS

NB: you’ll need to use browser detection to set the right -transform style attribute. The sample shown is correct for Chrome and Safari.