Skip to content
Advertisement

CSS 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

enter image description here

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

JavaScript
JavaScript
JavaScript
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement