<!--HTML-->

<div class="SteamCards">
    <div class="card3d"><img src="https://i.imgur.com/VOnn0i8.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/8lB9oxV.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/XRvTvTw.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/thS15hz.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/y1J0G88.png"></div>
</div>

<div class="SteamCards">
    <div class="card3d"><img src="https://i.imgur.com/EHZCX5W.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/p0R5bkO.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/vM58b96.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/gPB3kxS.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/tfIEXLj.png"></div>
</div>

<div class="SteamCards">
    <div class="card3d"><img src="https://i.imgur.com/Nf85Scd.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/WW4tXNk.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/eH24raG.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/uOTu6ej.png"></div>
    <div class="card3d"><img src="https://i.imgur.com/p14KNAP.png"></div>
</div>

<style type="text/css">
/* Блок с карточками */
.SteamCards {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 32px;
}

/* Контейнер карточки */
.card3d {
  transform: scale(1);
  perspective: 500px;
}

/* Контейнер карточки при наведении */
.card3d:hover {
  z-index: 10;
  transform: scale(1.2);
}

/* Картинки карточек */
.card3d img {
    width: 100px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0 0 0 / .12);
}

/* Картинки карточек при наведении */
.card3d:hover img {
    box-shadow: 0 16px 32px rgba(0 0 0 / .38);
}

/* Плавность анимации */
.card3d,
.card3d img {
  transition: all 250ms ease-out;
}
</style>