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

Курсы §22. Двумерные трансформации
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)

3 
.queen {
    transform: translate(0,-5px);
    z-index:2;
}

.jack {
    transform: rotate(-5deg) scale(0.9) translate(20px);
}

.king {
    transform: rotate(5deg) scale(0.9) translate(-20px);
    z-index:1;
}

.ten {
    transform: rotate(-10deg) scale(0.8) translate(45px,20px);
}

.ace {
    transform: rotate(10deg) scale(0.8) translate(-45px,20px);
}