Top & Left Position With Transform Rotate

I am looking for the JavaScript code which can arrange playing cards images as appear in the attached image, i am using CSS transform rotate with degree 7, but i tried to calculate

Solution 1:

To arrange the cards, you need to transform them (using CSS transform). Firstly, for each card, you need a rotate transform around the transform-origin at the right bottom corner. So you need to calculate the rotating angle for each card (by cumulating the angle by 7deg (or some other degree)). Secondly, you need to translate each card so that they are arranged along a path, as in your image shown, looks like this path is very close to an ellipse. So just define some ellipse via the horizontal and vertical radii (a and b), increase the rotating angle (around the center point of the ellipse) and calculate the x and y of the running point (on the ellipse path) based on the following formula (the ellipse equations in polar coordinates):

x = a * cos(alpha);y = b * sin(alpha);

We need to calculate the dx and dy (the difference between the current x (y) and the previous x (y)) and cumulate these values to use for translate transform.

Here is the demo code:

JS:

varn=13;//number of cardsvaral=7; //degree difference between 2 cardsvara=90;//horizontal radius of the ellipse path along which the cards are arranged.varb=200; //vertical radius of the ellipse path along which the cards are arranged.varstep=4;//the degree step to jump between 2 cards (along the ellipse path).varinitAlpha= (180 - al * (n - 1)) / 2;// (deg) may be negativevarbeta= (180 - step * (n - 1)) / 2 - 15;//varbetaRad= beta * Math.PI / 180;
varprefixes= ["webkit","moz","ms",""];
varx= a * Math.cos(betaRad), y = b * Math.sin(betaRad);
vardx=0, dy = 0;
function transform(elem, dx, dy, da){
  for(vari=0; i < prefixes.length; i++){
    elem.style[prefixes[i]  + (prefixes[i] ? "Transform" : "transform")] = "translate(" + dx + "px," +
        dy + "px) rotate(" + da + "deg)";
  }
}
for(vari=0; i < n; i++){    
  //create new cardvarcard= document.createElement("div");
  card.className = "card";
  document.body.appendChild(card);     
  transform(card, dx.toFixed(10), dy.toFixed(10), initAlpha);    
  beta += step;   
  initAlpha += al;
  betaRad = beta * Math.PI / 180;
  varx2= a * Math.cos(betaRad);    
  vary2= b * Math.sin(betaRad);
  dx += x - x2;
  dy += y - y2;    
  x = x2;
  y = y2;    
}    

CSS:

.card {
  width:150px;
  height:100px;
  border:1px solid gray;
  border-radius:5px;
  position:absolute;
  top:200px;
  left: 30px;
  -webkit-transform-origin:rightbottom;
  -ms-transform-origin:rightbottom;
  -moz-transform-origin:rightbottom;
  transform-origin:rightbottom;
  background:lightyellow;
  transition:background 0.3s;
}
.card:hover {
  background:orange;
}
body {
  background:black;
}

Demo

Note the arranged cards may not look exactly to what your image shows, but it's very close. You can change the number of cards (n), the degree difference al, the horizontal radius of the ellipse path a, the vertical radius of the ellipse path b, step, initAlpha, beta to arrange the cards differently.

This is a more intuitive demo in which you can set some text for the card without unexpected text direction.