Posición superior e izquierda con Transform Rotate

Estoy buscando el código de JavaScript que puede organizar las imágenes de las cartas que aparecen en la imagen adjunta, estoy usando transformación de CSS rotar con el grado 7, pero traté de calcular la izquierda y la parte superior de diferentes maneras para llegar a la imagen adjunta, pero no pude hacerlo

muestra

Para organizar las tarjetas, debe transformarlas (utilizando la transformación CSS). En primer lugar, para cada tarjeta, necesita una transformación de rotación alrededor del transform-origin la transform-origin en la esquina right bottom . Por lo tanto, debe calcular el ángulo de rotación para cada tarjeta (acumulando el ángulo en 7 7deg (o en algún otro grado)). En segundo lugar, debe traducir cada tarjeta para que estén dispuestas a lo largo de una ruta, ya que en la imagen que se muestra, parece que esta ruta está muy cerca de una elipse. Así que solo defina una elipse a través de los radios horizontales y verticales ( a y b ), aumente el ángulo de rotación (alrededor del punto central de la elipse) y calcule la y del punto de ejecución (en la ruta de la elipse) en función de lo siguiente fórmula (las ecuaciones de elipse en coordenadas polares):

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

Necesitamos calcular el dx y el dy (la diferencia entre el actual x ( y ) y el anterior x ( y )) y acumular estos valores para usar para translate transformación.

Aquí está el código de demostración:

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; } 

Manifestación

Tenga en cuenta que las tarjetas arregladas pueden no parecer exactamente a lo que muestra su imagen, pero está muy cerca. Puede cambiar el número de cartas ( n ), la diferencia de grado al , el radio horizontal de la trayectoria elipse a , el radio vertical de la ruta elipse b , step , initAlpha , beta para organizar las tarjetas de manera diferente.

Esta es una demostración más intuitiva en la que puede establecer texto para la tarjeta sin una dirección de texto inesperada.