https://codepen.io/javascript_mania/pen/vYaKGRK Всім привіт! | JavaScript_Mania 🇺🇦

https://codepen.io/javascript_mania/pen/vYaKGRK

Всім привіт!

GO розбирати фліп-анімацію?

ЩО?
ФЛІП - анімація

ДЕ?
ФЛІП-анімація найчастіше використовується на картці, в якій винесено ключові властивості або переваги товару, послуги тощо.

ЗВЕРНУТИ УВАГУ

Ця анімація реалізується за допомогою таких властивостей CSS
backface-visibility
transform-style
perspective

АНІМАЦІЯ:

При наведенні курсору на картку вона повинна перевертатися задньою гранню

ЯК?:
Готуємо HTML-розмітку

Картка складається з обгортки, в якій є 2 блоки, передня та задня частина відповідно. Дані елементи повинні бути накладені один на одного і в початковому стані її задня частина повинна бути перевернута на 180 градусів, ніби розташована до нас спиною.



Маємо грані абсолютним позиціонуванням один на одному і додамо їм властивість backface-visibility, ця властивість визначає видимість задньої грані елемента

Даній властивості надамо значення «hidden», таким чином ми приховуємо задню частину карток, що обертаються.

Додамо властивість transform-style: preserve-3d, тому що картки повинні обертатися в 3D-просторі

щоб анімація виглядала правильно - потрібно додати час виконання анімації transition: all 500ms linear; , без неї картка миттєво змінюватиме грань і користувач не побачить ефекту повороту

Щоб поворот картки виглядав красиво - додаємо властивість perspective: 1000px; , що надає перспективу елементу, що позиціонується у 3D-просторі

—

-Властивість backface-visibility визначає, чи видно задню грань елемента, коли він повернутий до користувача.

-hidden Задня поверхня прихована, що робить елемент невидимим, коли він повернуто від користувача.

-Властивість CSS perspective визначає відстань між площиною z = 0 і користувачем для того щоб надати 3D-позиціонується елементу ефект переспективи.

-Властивість transform-style CSS визначає положення дочірнього елемента в 3D-просторі або в тій же площині, що і батьківський елемент.

-preserve-3d - Показує, що дочірній елемент має бути спозиційований у 3D-просторі.

—

Анімація готова!

#education || JavaScript_Mania