CSS how to make an effect of a hand holding cards

Question

So basically i want to have an transparent image of a hand holding cards, then i want to display cards on a curve like when you are holding 10 cards in your hand (not fixed 10 of course). So they should be positioned on a curved dome. I'm working in angular, and i know that i have to accomplish this via position absolute and transform: translate-rotate css, just don't know how

I'm also working with bootstrap so this image with cards should be in a col-12 and compatible on a smaller screens.

I only have the parts of the code that i took from a guy that positioned elements in a circle - Bootstrap 3 align elements into circle i tried to play around with translate and rotate but couldn't get it working

Answer 1

Here's the way I approached it. There's alot going on here, but it's basically

• setting a overall width to work with
• using a predefined number of cards and overall angle allowance
• using math to distribute and angle the cards
• using transform-origin: bottom center; to give the effect

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>