задание 32

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

Получилось на 92 %
html:

<!DOCTYPE html>
<html>
<head>
   <title>Испытание: раскладка карт</title>
   <meta charset="utf-8">
   <base href="/assets/course71/">
</head>
<body>
    <div class="deck">
        <img class="ten" src="cards/10.png" alt="ten">
        <img class="jack" src="cards/jack.png" alt="jack">
        <img class="queen" src="cards/queen.png" alt="queen">
        <img class="king" src="cards/king.png" alt="king">
        <img class="ace" src="cards/ace.png" alt="ace">
    </div>
</body>
</html>

css

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

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

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

что не так?
у меня:

Должно быть:

2

Воспользуйтесь z-index, чтобы поднять центральную карту над другими.

2 лайка