#5

mybb@mybb.ru (��) — Sun, 19 Jul 2026 13:52:01 +0300

��

��:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>������� ����</title>
    <link rel="stylesheet" href="./styles/style.css" />
  </head>
  <body>
    <div class="container">
      <button type="button" class="button"></button>
      <div class="card front">
        <img src="./images/spades.jpg" alt="������� ����" />
      </div>
    </div>
    <script src="scripts/script.js"></script>
  </body>
</html>

��:

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  inline-size: 100dvi;
  block-size: 100dvb;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #5f0dee;
}

img {
  max-inline-size: 100%;
  max-block-size: 50vh;
  border-radius: 30px;
  object-fit: cover;
}

.container {
  position: relative;
}

.button {
  position: absolute;
  inset: -20px 0 0 -20px;
  z-index: 5;
  inline-size: 50px;
  block-size: 50px;
  border: none;
  padding-inline-start: 30px;
  background-color: transparent;
  transition: 0.4s linear;
  cursor: pointer;
}

.button::before {
  content: '';
  position: absolute;
  inset: 0;
  inline-size: 0;
  block-size: 0;
  border-inline-end: 20px solid transparent;
  border-block-start: 20px solid #ce1d5a;
}

.button::after {
  content: '';
  position: absolute;
  inset: 8px 0 0 8px;
  inline-size: 0;
  block-size: 0;
  border-inline-end: 20px solid transparent;
  border-block-start: 20px solid #000;
}

.button:hover::before,
.button:hover::after {
  opacity: 0.7;
}

.card {
  position: relative;
  transition: transform 1.5s ease-in-out;
  transform-origin: top left;
  transform-style: preserve-3d;
}

.front {
  z-index: 2;
  border-radius: 30px;
}

.animated {
  transform: rotateZ(180deg);
}

��:

let cards = document.querySelectorAll('.card');
let button = document.querySelector('.button');

button.addEventListener('click', function () {
  cards.forEach((card) => {
    card.classList.toggle('animated');
  });
});

���� �� ���������

#5

��