Испытание: раскладка карт


#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: scale(0.8) rotate(-10deg) translateX(45px) translateY(20px);
}
.jack {
transform: scale(0.9) rotate(-5deg) translateX(20px);
}
.queen {
transform: translateY(-5px);
}
.king {
transform: scale(0.9) rotate(5deg) translateX(-20px);
z-index:-1;
}
.ace {
transform: scale(0.8) rotate(10deg) translateX(-45px) translateY(20px);
z-index:-2;
}

Здравствуйте. Оцените пожалуйста код. Как его можно доработать или оптимизировать?
Спасибо.


#2

добрый день,
например, можно вместо translateX(45px) translateY(20px) писать translate(45px, 20px) , а вместо translateX(-20px) - translate(-20px) (без X)