javascript - 带有变换旋转的顶部和左侧位置

Question

我正在寻找可以安排扑克牌图像的 JavaScript 代码，如附图所示，我正在使用 CSS 变换以 7 度旋转，但我试图以不同的方式计算左侧和顶部以得出附上图片，但我无法这样做。

Answer 1

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

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

我们需要计算dx和dy(当前x(y)和dy的差)前面的 x (y)) 并累积这些值以用于 translate 转换。

这是演示代码:

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

请注意，排列好的卡片可能与您的图片显示的不完全一样，但非常接近。你可以改变卡片的数量(n)，度差al，椭圆路径的水平半径a，垂直半径椭圆路径 b、step、initAlpha、beta 以不同方式排列卡片。

这是一个 more intuitive demo 您可以在其中为卡片设置一些文本，而不会出现意外的文本方向。