Hearthstone Hand

by Bacher

HTML

<div class="hand hand6">
    <div class="card-wrap c1"><div class="card"><img src="http://media-hearth.cursecdn.com/avatars/147/610/246.png"></div></div>
    <div class="card-wrap c2"><div class="card"><img src="http://media-hearth.cursecdn.com/avatars/147/610/246.png"></div></div>
    <div class="card-wrap c3"><div class="card"><img src="http://media-hearth.cursecdn.com/avatars/147/610/246.png"></div></div>
    <div class="card-wrap c4"><div class="card"><img src="http://media-hearth.cursecdn.com/avatars/147/610/246.png"></div></div>
    <div class="card-wrap c5"><div class="card"><img src="http://media-hearth.cursecdn.com/avatars/147/610/246.png"></div></div>
    <div class="card-wrap c6"><div class="card"><img src="http://media-hearth.cursecdn.com/avatars/147/610/246.png"></div></div>
    
</div>

SCSS

.hand {
    position: absolute;
    left: 350px;
}
.card {
    position: absolute;
    width: 88px;
    height: 145px;
    top: 0;
    transform: rotate(0);
}

IMG {
    position: absolute;
    pointer-events: none;
    top: -15px;
    left: -7px;
    width: 118px;
}

.card-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 88px;
    height: 145px;
    transform-origin: 60% 680px;
    transition: top ease-out 0.2s;
}

.hand1 .c1 { transform: rotate(0deg); }

.hand2 .c1 { transform: rotate(0deg) translate(-130px,0); }
.hand2 .c2 { transform: rotate(0deg) translate(130px,0); }

.hand3 .c1 { transform: rotate(0deg) translate(-260px,0); }
.hand3 .c2 { transform: rotate(0deg); }
.hand3 .c3 { transform: rotate(0deg) translate(260px,0); }

.hand4 .card { transform: rotate(-8deg); }
.hand4 .c1 { transform: rotate(-15deg); }
.hand4 .c2 { transform: rotate(-5deg); }
.hand4 .c3 { transform: rotate(5deg); }
.hand4 .c4 { transform: rotate(15deg); }

.hand5 .card { transform: rotate(-8deg); }
.hand5 .c1 { transform: rotate(-16deg); }
.hand5 .c2 { transform: rotate(-8deg); }
.hand5 .c3 { transform: rotate(0deg); }
.hand5 .c4 { transform: rotate(8deg); }
.hand5 .c5 { transform: rotate(16deg); }

.hand6 .card { transform: rotate(-8deg); }
.hand6 .c1 { transform: rotate(-18deg); }
.hand6 .c2 { transform: rotate(-11deg); }
.hand6 .c3 { transform: rotate(-4deg); }
.hand6 .c4 { transform: rotate(3deg); }
.hand6 .c5 { transform: rotate(10deg); }
.hand6 .c6 { transform: rotate(17deg); }

.hand7 .card { transform: rotate(-8deg); }
.hand7 .c1 { transform: rotate(-18deg); }
.hand7 .c2 { transform: rotate(-12deg); }
.hand7 .c3 { transform: rotate(-6deg); }
.hand7 .c4 { transform: rotate(0deg); }
.hand7 .c5 { transform: rotate(6deg); }
.hand7 .c6 { transform: rotate(12deg); }
.hand7 .c7 { transform: rotate(18deg); }

.card-wrap:hover {
    top: -28px;
}

Babel + JSX

$('.card-wrap').on('mouseenter', e => {
    console.log(e);
});