0
350
VistasCSS cómo hacer un efecto de una mano sosteniendo cartas
Así que básicamente quiero tener una imagen transparente de una mano con cartas, luego quiero mostrar las cartas en una curva como cuando tienes 10 cartas en la mano (sin fijar 10, por supuesto). Por lo tanto, deben colocarse en una cúpula curva. Estoy trabajando en angular, y sé que tengo que lograr esto a través de la posición absoluta y la transformación: traducir-rotar css, simplemente no sé cómo
También estoy trabajando con bootstrap, por lo que esta imagen con tarjetas debería estar en una columna 12 y ser compatible en pantallas más pequeñas.
Solo tengo las partes del código que tomé de un tipo que colocó los elementos en un círculo: Bootstrap 3 alinea los elementos en un círculo . Traté de jugar con traducir y rotar, pero no pude hacerlo funcionar.
1 Respuestas
Responde la pregunta0
Esta es la forma en que lo abordé. Están pasando muchas cosas aquí, pero es básicamente
- establecer un ancho total para trabajar con
- utilizando un número predefinido de tarjetas y un margen de ángulo total
- usar las matemáticas para distribuir y orientar las cartas
- usando
transform-origin: bottom center;para dar el efecto
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>