CSS如何制作手拿着卡片的效果

Question

所以基本上我想要一个手拿着牌的透明图像，然后我想在曲线上显示牌，就像你手里拿着 10 张牌一样（当然不是固定的 10 张）。因此它们应该放置在弯曲的圆顶上。 我正在以角度工作，我知道我必须通过绝对位置和转换来完成此操作：translate-rotate css，只是不知道

我如何使用引导程序，所以这个带有卡片的图像应该在一个列中-12 并兼容较小的屏幕。

我只有从一个将元素定位在圆圈中的人那里获取的代码部分 - Bootstrap 3 将元素对齐到圆形 我尝试使用平移和旋转，但无法使其工作

Answer 1

这是我的处理方法。这里发生了很多事情，但它基本上是

• 设置总体宽度
• 使用预定义数量的卡片
• 分布和倾斜卡片
• ，并使用数学来设置整体角度余量，使用 transform-origin:bottom center; 来 给出效果

let cards = document.querySelector('.cards');
let w = cards.offsetWidth;
let totalarc = 270;
let numcards = 7;
let angles = Array(numcards).fill('').map((a, i) => (totalarc / numcards * (i + 1)) - (totalarc/2 + (totalarc / numcards) / 2));
let margins = angles.map((a, i) => w / numcards * (i + 1));

angles.forEach((a, i) => {
  let s = `transform:rotate(${angles[i]}deg);margin-left:${margins[i]}px;`
  let c = `<div class='card' style='${s}'></div>`;
  cards.innerHTML += c;
})

.container {
  position: relative;
  margin-left: 80px;
  width: 100%;
}

.cards {
  width: 150px;
}

.card {
  width: 120px;
  height: 200px;
  background: #999;
  border: 1px solid #000;
  position: absolute;
  opacity: .5;
  transform-origin: bottom center;
}

<div class='container'>
  <div class='cards'></div>
  <div class='hand'>
    <div>
    </div>