CSS如何制作手拿牌的效果

Question

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

我也在使用 bootstrap 所以这张带有卡片的图片应该是 col-12 并且在较小的屏幕上兼容。

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

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>

CSS如何制作手拿牌的效果

CSS how to make an effect of a hand holding cards

javascript

css

css-transforms

twitter-bootstrap

bootstrap-4