Мастерская: карточка с анимацией 3D-переворота
Устройство разметки.
.card — общий контейнер компонента.
.card-inner — внутренний контейнер, который будет использоваться для 3D-анимации всей карточки.
.card-front и .card-back — это лицевая и тыльная стороны карточки.
Добавляем базовые стили для всех элементов на странице. Устанавливаем box-sizing, убираем отступы и задаем шрифт.
Центрируем содержимое body с помощью флексов и задаем фон.
Задаём стили для внутреннего контейнера карточки. Устанавливаем размеры и позиционирование.
Добавляем общие стили для лицевой и тыльной сторон карточки. Устанавливаем размеры и выравнивание элементов внутри. Позиционируем стороны абсолютом.
Задаем фон и цвет текста для лицевой стороны карточки.
Устанавливаем фон и цвет текста для тыльной стороны карточки.
Устанавливем перспективу для контейнера, чтобы создать 3D-эффект при вращении.
Добавляем для внутреннего контейнера карточки transform-style: preserve-3d;. Теперь лицевая и тыльная стороны карточки будут иметь собственные 3D-пространства. Добавляем плавный переход при вращении.
Скрываем задники лицевой и тыльной сторон карточки при повороте.
Поворачиваем тыльную стороны карточки на 180 градусов.
При наведении поворачиваем внутренний контейнер карточки на 180 градусов. Наведите курсор на карточку, чтобы увидеть готовый эффект.
Давайте разберёмся, как работает 3D-эффект. Для этого изменим часть стилей: сделаем внутренний контейнер шире, и разведём по краям стороны карточки.
Вёрнём видимость задников у лицевой и тыльной стороны карточки.
И развернём тыльную стороны карточки обратно на 180 градусов.
Чтобы 3D-эффект поворота карточки сработал, нужно повернуть вокруг своей оси два объекта.
Первый — .card-back, чтобы тыльная сторона карточки была видна после поворота всей карточки.
Второй — .card-inner, внутри которого поворачиваются лицевая и тыльная сторорны карточки.
Давайте анимируем все эти повороты.
Посмотрите на поворот .card-back, после поворота виден задник этого контейнера.
Снова спрячем задник у .card-back. Вы можете увидеть, как он пропадает при повороте карточки. А если наведетё на карточку, чтобы она перевернулась целиком, то сможете увидеть, как задник появляется.
Добавим анимацию с поворотом всей карточки. Единственное, что нам мешает — это задник лицевой стороны. Он должен пропадать при повороте всей карточки.
Спрячем задник лицевой стороны.
А чтобы 3D-иллюзия работала, остаётся снова совместить обе стороны карточки.
Удаляем все анимации и возвращаем готовый код компонента.
