JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cont"></div>

CSS

#cont {
    margin: 100px;
    position: relative;
}
.point {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background: #44403D url(http://dl.dropbox.com/u/46193/p1.png) 50% 50% no-repeat;
    border: solid 3px #fff;
    border-radius: 100px;
    box-shadow: 0 0 1px #ACACAC, 0 0 3px rgba(0, 0, 0, 0.5), 0 0 2px #000 inset;
    -webkit-transition: -webkit-transform .8s ease-out;
    -webkit-transform: rotate(160deg);
}

.rot {
   -webkit-transform: rotate(0deg);
}

JavaScript

function getCirclePoints(centerX, centerY, radius, segments) {
    var totalPoints = [],
        x = 0,
        y = 0;
    for (var i = 0; i < segments; i++) {
        x = centerX + radius * Math.sin(i * 2 * Math.PI / segments);
        y = centerY + radius * Math.cos(i * 2 * Math.PI / segments);
        totalPoints.push({
            'x': x,
            'y': y
        });
    }
    return totalPoints;
}

getCirclePoints(0, 0, 60, 8).each(function(point, index) {
    var el = Element('div', {
        'morph': {
            transition: 'back:out',
            duration: 500
        },
        'class': 'point'
    }).inject(document.id('cont'));

    (function() {
        console.log(this);
        this.morph({
            top: point.y,
            left: point.x
        });
        this.addClass('rot');
    }).delay(250 * index, el);
});