顶级＆amp;使用“变换旋转”左侧位置

Question

我正在寻找可以安排附加图像中出现的扑克牌图像的JavaScript代码，我使用的是CSS变换旋转度数为7，但我试图用不同的方式计算左边和顶部以得出附图但我无法这样做。

Answer 1

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

y

我们需要计算x = a * cos(alpha); y = b * sin(alpha); 和dx（当前dy（x）与之前y之间的差异（{{1} }））并累积这些值以用于x转换。

以下是演示代码：

<强> JS ：

y

<强> CSS ：

translate

Demo

请注意，排列的卡片可能与您的图片显示的内容不完全相符，但它非常接近。您可以更改卡片数量（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; } ），度差.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，step以不同方式排列卡片。

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