Як створити 3D-анімації з флеш-кнопками з CSS
Фліп-анімація популярні ефекти CSS, які показують як спереду, так і ззаду елемента HTML, повертаючи їх зверху вниз, або зліва направо (і навпаки). Вони рад в 2-х вимірах, але вони навіть більш прохолодні, коли виконуються в 3D.
У цьому пості я покажу вам, як це зробити створювати прості кнопки 3D, і додайте анімації для фліпів їм.
Ви можете побачити результат на демо-версії нижче, якщо ви натиснете на кнопки, вони виконають позначену анімацію.
1. Створення HTML для кнопки 3D
Щоб створити 3D-кнопку (з Top → Bottom flip), спочатку ми складаємо три Ми встановлюємо Ми додаємо фонові зображення до обличчя передньої і задньої кнопок і встановлюємо прохолодний лінійний градієнт за зображеннями для обох. Головне в тому, що в CSS ви можете встановити декілька зображень як фонове зображення для одного елемента, а також можете оголосити градієнти як фонові зображення.. Середнє обличчя, До покрити простір між передньою та задньою гранями з середнім, ми покласти середню поверхню плоскою через x-площину 3D-простору за допомогою Оскільки середня грань була прокладена плоскою по площині x, її верхня точка на осі y проходить на 10px (половина її висоти) вниз від оригіналу. Так, щоб витягнути його назад та вирівняти його вершину з двома іншими кнопками обличчя, я додав Я використав Поки ви побачите лише передню грань на екрані, оскільки x-площина прихована від зору, а на y-площині (екрані) останнє обличчя, що лежало, було спереду. Обертаючи кнопку Ви також зможете побачити інші обличчя. Властивість CSS у стилі перетворення визначає, чи відображаються дочірні елементи HTML-елемента плоскими або розташованими в 3D-просторі. У фрагменті коду нижче Зверніть увагу, що я використовував Однак на наступному етапі ми змінимо його На цьому етапі наша кнопка 3D ще не анімована. Ми можемо зробити це за допомогою Давайте зробимо кнопку тільки обертатися на hover, тому замість Зверніть увагу, що в Github repo, I до кожної кнопки додано прапорець для того, щоб увімкнути анімацію .flipBtn контейнер, який буде функціонувати як кнопка 3D, і ми розміщуємо кнопку 3D в .flipBtnWrapper обгортка.
2. Додавання основних стилів у CSS
ширина і висота властивості оболонки, кнопки і кнопки обличчя, і позиціонувати їх за допомогою методу відносного / абсолютного позиціонування. .flipBtnWrapper ширина: 200px; висота: 200px; позиція: відносна; .flipBtn, .flipBtn_face ширина: 100%; висота: 100%; позиція: абсолютна;
3. Встановіть обличчя 3 кнопок
.flipBtn_mid, дано a висота 20px, а між передньою та задньою гранями створюється однаковий простір 20px. Ми досягаємо останнього за допомогою translateZ () CSS функція, що переміщує елемент по осі z. Ми штовхаємо задню частину назад на 10px, і приносять передню частину вперед на 10px. .flipBtn_front background-image: url ("зображення / css-3d-flip-button-animation-play.png"), лінійний градієнт (# FF6366 50%, # FEA56E); backface-видимість: прихована; transform: translateZ (10px); .flipBtn_back background-image: url ("зображення / css-3d-flip-button-animation-pause.png"), лінійний градієнт (# FF6366 50%, # FEA56E); фоновий колір: синій; transform: translateZ (-10px); .flipBtn_mid висота: 20px; фоновий колір: # d5485a; transform: rotateX (90deg); зверху: -10px; transform: rotateX (90deg); правило робить його перпендикулярним на передню і задню кнопки обличчя на y-площині.зверху: -10px правило.видимість Властивість CSS для передньої поверхні, тому, коли ми перевертаємо кнопку, тильна сторона передньої поверхні не буде видно.
4. Поворот кнопки
стиль перетворення: preserve-3d; правило дає 3D гучність нашій кнопці, в той час як transform: rotatexX () властивість обертає його навколо осі x. .flipBtn стиль перетворення: preserve-3d; transform: rotateX (-120deg);
-120deg виключно для демонстраційних цілей, оскільки таким чином простіше проілюструвати роботу обертання кнопки.
-180deg щоб повністю повернути кнопку.5. Анімація кнопки
перехід власності. Ми використовуємо перетворення властивість для першого значення, оскільки це властивість, для якої потрібно застосувати ефект переходу. Друге значення - це тривалість, 2s..flipBtn Селектор, давайте використовувати .flipBtnWrapper: hover .flipBtn. Як згадувалося раніше, також змінюється значення rotateX () до -180deg щоб перевернути кнопку. .flipBtn transition: transform 2s; стиль перетворення: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: перевірено а не на : hover, таким чином він веде себе як реальна кнопка. Я також включив чотири різні кнопки з чотирма напрямками перевертання (Top → Bottom, Bottom → Top, Right → Left і Left → Right), так що ви можете легко використовувати який завгодно.
