0
348
ViewsCSS how to make an effect of a hand holding cards
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
1 answers
Answer question0
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>