Раскладка карт Испытание 98.7%

Курсы §22. Двумерные трансформации
1 
html,

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

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

.deck > img {
position: relative;
display: inline-block;
margin-right: -4px;
width: 110px;
}
.ten {
transform:rotate(-10deg) scale(0.8) translate(45px, 20px);}
.jack {
transform:rotate(-5deg) scale(0.9) translate(20px, 0px) }
.queen {
transform:scale(1) translateY(-5px) translateX(-220px);
}
.king {
transform:rotate(5deg) scale(0.9) translate(-20px, 0px)}
.ace {
transform:rotate(10deg) scale(0.8) translate(226px, -28px)}

Как бы я не менял значения, у меня постоянно выходит 98.7%, проблема с тузом. Также менял HTML код (расположение карт такое Десять Валет Туз Король Дама, чтобы было правильное наложение), подскажите, как добить до 100 с таким кодом, пожалуйста. Где косяк?)

2

Наложение через z-index нужно делать, королю -1, тузу -2.
Ниже рабочий код на 100%, сравните.

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

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

.queen {
  transform: translate(0, -5px);
}

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

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