所以基本上我想要一個手持卡片的透明影像，然后我想在曲線上顯示卡片，就像你手里拿著 10 張卡片（當然不是固定的 10 張卡片）一樣。所以它們應該放置在彎曲的圓頂上。我在角度作業，我知道我必須通過絕對位置和變換來完成這個：translate-rotate css，只是不知道如何
我也在使用引導程式，所以這個帶有卡片的影像應該在 col-12 中并且在較小的螢屏上兼容。
我只有從一個將元素定位在一個圓圈中的人那里獲取的部分代碼 - 
uj5u.com熱心網友回復：
這是我接近它的方式。這里發生了很多事情，但基本上是
- 設定要使用的整體寬度
- 使用預定義數量的卡片和總角度余量
- 使用數學來分配和傾斜卡片
- 用來
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/431646.html
標籤：javascript css 推特引导 引导程序 4 css 转换
上一篇：為什么引導列會中斷到新行上？