JSFiddle - React, Tailwind, and code Playground

by viphalongpro

CSS

.card {
    width:200px;
    height:250px;
    border:1px solid gray;
    border-radius:5px;
    position:absolute;
    top:200px;
    left: 200px;
    -webkit-transform-origin:left bottom;
    -ms-transform-origin:left bottom;
    -moz-transform-origin:left bottom;
    transform-origin:left bottom;
    background:lightyellow;
    transition:background 0.3s;
    font-size:80px;    
}
.card:hover {
    background:orange;
}
body {
    background:black;
}

JavaScript

var n = 13;//number of cards
var al = 7; //degree difference between 2 cards
var a = 90;//horizontal radius of the ellipse path along which the cards are arranged.
var b = 200; //vertical radius of the ellipse path along which the cards are arranged.
var step = 4;//the degree step to jump between 2 cards (along the ellipse path).

var initAlpha = (180 - al * (n - 1)) / 2 - 90;// (deg) may be negative
var beta = (180 - step * (n - 1)) / 2 - 15;//
var betaRad = beta * Math.PI / 180;
var prefixes = ["webkit","moz","ms",""];
var x = a * Math.cos(betaRad), y = b * Math.sin(betaRad);
var dx = 0, dy = 0;
function transform(elem, dx, dy, da){
    for(var i = 0; i < prefixes.length; i++){
        elem.style[prefixes[i]  + (prefixes[i] ? "Transform" : "transform")] = "translate(" + dx + "px," +
            dy + "px) rotate(" + da + "deg)";
    }
}
for(var i = 0; i < n; i++){    
    //create new card
    var card = document.createElement("div");
    card.className = "card";
    document.body.appendChild(card);     card.innerHTML = i + "";
    transform(card, dx.toFixed(10), dy.toFixed(10), initAlpha);    
    beta += step;   
    initAlpha += al;
    betaRad = beta * Math.PI / 180;
    var x2 = a * Math.cos(betaRad);    
    var y2 = b * Math.sin(betaRad);
    dx += x - x2;
    dy += y - y2;    
    x = x2;
    y = y2;    
}