Раскладка карт 32/32 100% за 10 мин


#1

Ну это было соооовсем не сложно, вопреки ожиданиям!

html,
body {
width: 570px;
height: 250px;
margin: 0;
padding: 0;
}

.deck {
width: 570px;
margin: 0 auto;
padding-top: 50px;
}

.deck > img {
position: relative;
display: inline-block;
width: 110px;
margin-right: -4px;

}

.ten {
transform:rotate(-10deg) scale(0.8) translate(45px, 20px);
}
.jack {
transform:rotate(-5deg) scale(0.9) translate(20px, 0px);
z-index:1;
}
.queen {
transform:rotate(0deg) scale(1) translate(0px, -5px);
z-index:2;
}
.king {
transform:rotate(5deg) scale(0.9) translate(-20px, 0px);
z-index:1;
}
.ace {
transform:rotate(10deg) scale(0.8) translate(-45px, 20px);
}