Створіть анімацію перевороту в CSS

11

Від автора: анімація CSS дуже цікава; її краса полягає в тому, що з допомогою безлічі простих властивостей можна зробити що завгодно від елегантного плавного прояви до дуже красивих ефектів. Один із засобів CSS, знаходиться десь в проміжку між ними – це ефект перевороту CSS, де при цьому на обох сторонах контейнера, як з лицьового, так і виворітного, є контент. Цей підручник покаже вам, як легко і просто створити його.

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

Створіть анімацію перевороту в CSS

HTML

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

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

CSS

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

/* весь контейнер підтримує перспективу */
.flip-container {
perspective: 1000;
}
/* переверніть бік при проведенні мишею */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* тут знаходиться швидкість перекидання */
.flipper {
transition: 0.6 s;
transform-style: preserve-3d;
position: relative;
}
/* приховайте зворотний бік під час перевороту */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* лицьова сторона розміщена над зворотного */
.front {
z-index: 2;
}
/* зворотна, спочатку прихована сторона */
.back {
transform: rotateY(180deg);
}

Ось приблизний огляд процесу:

Зовнішній контейнер встановлює перспективу всієї області анімації

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

Лицьовий і зворотний елементи розташовані абсолютно, тому можуть перекривати один одного в одному положенні; їх backface-visibility приховано, тому зворотна сторона переворачиваемых елементів під час анімації немає

У особового елемента z-index вище, ніж у зворотної, тому можна кодувати лицьова елемент першим, і він все одно відображається зверху

Зворотний елемент обертається на 180 градусів, щоб діяти як друга сторона.

Ось, загалом, і все! Помістіть цю просту структуру в потрібне місце і призначте стилі кожній стороні по своєму смаку!

Перемикач перевороту CSS

Якщо ви хочете, щоб елемент перевертався допомогою JavaScript’а тільки по команді, це можна влаштувати за допомогою простого перемикача класу CSS:

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

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

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

Виконати вертикальний переворот трохи складніше – потрібно змінити його вісь. Вихідний код слід переробити, і картка стане обертатися в іншу сторону:

.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 213.5 px; /* половина висоти */
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}

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

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