Top & Left position with Transform Rotate

Question

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 the left and top in different ways to come up with the attached image but i was unable to do so.

Answer 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 :

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;// (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);     
  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;    
}    

CSS :

.card {
  width:150px;
  height:100px;
  border:1px solid gray;
  border-radius:5px;
  position:absolute;
  top:200px;
  left: 30px;
  -webkit-transform-origin:right bottom;
  -ms-transform-origin:right bottom;
  -moz-transform-origin:right bottom;
  transform-origin:right bottom;
  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.