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
Advertisement
Answer
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>