CSS如何使手握卡产生效果
CSS如何使手握卡产生效果
提问于 2022-02-22 19:36:18
所以基本上，我想有一个透明的图像，一只手握牌，然后我想在曲线上显示卡片，就像你手里拿着10张牌(当然不是固定的10张)。所以它们应该放在弯曲的圆顶上。我工作的角度，我知道我必须通过位置绝对和转换:平移旋转css，只是不知道如何做到这一点。
我也在使用引导程序，所以这个带有卡片的图像应该在一个col-12中，并且可以在一个较小的屏幕上兼容。
我只有我从一个将元素放置在一个圆圈中的人那里获取的代码的部分-- Bootstrap 3 align elements into circle，我试着玩转换和旋转，但是无法让它工作。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-22 20:11:10
这是我接近它的方式。这里有很多事情，但基本上是
使用预定义的卡数和整体角度allowance
- using数学设置一个总体宽度以与
- 一起工作，使用
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71227308
复制相关文章
相似问题
腾讯云开发者
