Создаем анимацию переворота в CSS

      Комментариев к записи Создаем анимацию переворота в CSS нет

От автора: анимация CSS очень интересна; ее красота состоит в том, что с помощью множества простых свойств можно сделать что угодно от элегантного плавного проявления до очень красивых эффектов. Одно из средств CSS, находящееся где-то в промежутке между ними – это эффект переворота CSS, где при этом на обеих сторонах контейнера, как с лицевой, так и изнаночной, имеется контент. Этот учебник покажет вам, как легко и просто создать его.



Краткое примечание: это не первый учебник о подобном эффекте, но все остальные показались мне слишком сложными. Во многие другие статьи добавлены дополнительные стили для кодирования примеров, требующие затем от читателя расшифровки, что из них нужно, а что нет. В данном учебнике этот вопрос опускается, предоставляя вам только необходимые стили; можете украсить любую сторону каждого оборота как вам заблагорассудится.

ДЕМО

HTML

Структура HTML для получения ожидаемого вами двустороннего эффекта:

01.<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
02.<div class="flipper">
03.<div class="front">
04.<!-- front content -->
05.</div>
06.<div class="back">
07.<!-- back content -->
08.</div>
09.</div>
10.</div>

Здесь есть две стороны контента, лицевая «front» и обратная «back», как вы и ожидали, а кроме того, два содержащих элемента с очень специфическими ролями, объясняемыми CSS. Также обратите внимание на фрагмент ontouchstart, который позволяет менять стороны на сенсорных экранах. Естественно, вам следует ввести этот код в отдельный малозаметный блок JavaScript, если хотите.

CSS





Хочу побиться об заклад, что вне обычного вендорного префиксного раздутия кода вы удивитесь, как мало CSS используется:

01./* весь контейнер поддерживает перспективу */
02..flip-container {
03.perspective: 1000;
04.}
05./* переверните сторону при проведении мышью */
06..flip-container:hover .flipper, .flip-container.hover .flipper {
07.transform: rotateY(180deg);
08.}
09. 
10..flip-container, .front, .back {
11.width: 320px;
12.height: 480px;
13.}
14. 
15./* здесь находится скорость перевертывания */
16..flipper {
17.transition: 0.6s;
18.transform-style: preserve-3d;
19. 
20.position: relative;
21.}
22. 
23./* скройте обратную сторону во время переворота */
24..front, .back {
25.backface-visibility: hidden;
26. 
27.position: absolute;
28.top: 0;
29.left: 0;
30.}
31. 
32./* лицевая сторона размещена над обратной */
33..front {
34.z-index: 2;
35.}
36. 
37./* обратная, изначально скрытая сторона */
38..back {
39.transform: rotateY(180deg);
40.}

Вот примерный обзор процесса:

Внешний контейнер устанавливает перспективу всей области анимации

На самом деле переворачивается внутренний контейнер, вращаясь на 180 градусов при проведении мышью над родительским контейнером. Здесь вы, кроме того, контролируете скорость перехода. Изменение вращения на -180 градусов переворачивает элементы в обратном направлении.

Лицевой и обратный элементы расположены абсолютно, поэтому могут «перекрывать» друг друга в одном положении; их backface-visibility скрыто, поэтому обратная сторона переворачиваемых элементов во время анимации не отображается

У лицевого элемента z-index выше, чем у обратного, поэтому можно кодировать лицевой элемент первым, и он все равно отображается сверху

Обратный элемент вращается на 180 градусов, чтобы действовать как вторая сторона.



Вот, в общем, и все! Поместите эту простую структуру в нужное место и назначьте стили каждой стороне по своему вкусу!

Переключатель переворота CSS

Если вы хотите, чтобы элемент переворачивался посредством JavaScript’а только по команде, это можно устроить с помощью простого переключателя класса CSS:

1..flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
2.transform: rotateY(180deg);
3.}

При добавлении элементу контейнера класса flip карточка будет переворачиваться с помощью JavaScript – не требуя от пользователя проведения мышью. Комментарий JavaScript типа document.querySelector(«#myCard»).classList.toggle(«flip») проделает этот переворот!

Вертикальный переворот CSS

Выполнить вертикальный переворот немного сложнее – нужно изменить его ось. Исходный код следует переделать, и карточка станет вращаться в другую сторону:

01..vertical.flip-container {
02.position: relative;
03.}
04. 
05..vertical .back {
06.transform: rotateX(180deg);
07.}
08. 
09..vertical.flip-container .flipper {
10.transform-origin: 100% 213.5px; /* половина высоты */
11.}
12. 
13..vertical.flip-container:hover .flipper {
14.transform: rotateX(-180deg);
15.}

Вы столкнетесь с одной странностью – потребностью в определении точного преобразования на основе пикселей вместо 50%.

Переворот всегда был классическим типичным примером того, что можно сделать с помощью анимации CSS, и в меньшей степени — 3D CSS-анимации. Лучше всего здесь то, что вовлекается на самом деле совсем мало CSS. Этот эффект очень хорошо подойдет для игр HTML5 и он идеален в качестве отдельного «карточного» эффекта. Для чего бы вы еще предложили его использовать?

Статья автора David Walsh взята с сайта: https://webformyself.com/

Добавить комментарий