顶部&使用变换旋转的左侧位置 [英] Top & Left position with Transform Rotate

问题描述

我正在寻找的JavaScript代码，可以安排扑克牌图像出现在附件图像，我使用CSS变换旋转与度7，但我试图计算的左和顶以不同的方式来提出

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.

推荐答案

要排列卡片，需要对其进行变换（使用CSS变换）。首先，对于每张卡，您需要在右下角角的 transform-origin 所以你需要计算每张卡的旋转角度（通过 7deg （或某种其他程度）累加角度）。其次，你需要翻译每张卡片，使它们沿一个路径排列，如图所示，看起来像这条路径非常接近椭圆。所以只需通过水平和垂直半径（ a 和 b ）定义一些椭圆，增加旋转角度椭圆的中心点）并计算运行点（在椭圆路径上）的 x 和 y 以下公式（极坐标中的椭圆方程）：

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

我们需要计算 dx code> dy （当前 x （ y ）和上一个 x （ y ））并累积这些值用于 translate transform。

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.

这是演示代码：

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

演示

请注意，排列的信息卡可能不完全符合您的图片显示，但非常接近。您可以更改卡的数量（ n ），程度差 al ，椭圆路径的水平半径 a ，椭圆路径的垂直半径 b ，步骤 ， initAlpha ， beta 以不同的方式排列卡片。

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.

这篇关于顶部&使用变换旋转的左侧位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！