Домашня » Кодування » Як створити 3D-анімації з флеш-кнопками з CSS

    Як створити 3D-анімації з флеш-кнопками з CSS

    Фліп-анімація популярні ефекти CSS, які показують як спереду, так і ззаду елемента HTML, повертаючи їх зверху вниз, або зліва направо (і навпаки). Вони рад в 2-х вимірах, але вони навіть більш прохолодні, коли виконуються в 3D.

    У цьому пості я покажу вам, як це зробити створювати прості кнопки 3D, і додайте анімації для фліпів їм.

    Ви можете побачити результат на демо-версії нижче, якщо ви натиснете на кнопки, вони виконають позначену анімацію.

    1. Створення HTML для кнопки 3D

    Щоб створити 3D-кнопку (з Top → Bottom flip), спочатку ми складаємо три

    s один на одного, два для передньої і задньої граней кнопки, і третій для заповнення глибини в середині. Ми поміщаємо три кнопки обличчя в .flipBtn контейнер, який буде функціонувати як кнопка 3D, і ми розміщуємо кнопку 3D в .flipBtnWrapper обгортка.

     
    2. Додавання основних стилів у CSS

    Ми встановлюємо ширина і висота властивості оболонки, кнопки і кнопки обличчя, і позиціонувати їх за допомогою методу відносного / абсолютного позиціонування.

     .flipBtnWrapper ширина: 200px; висота: 200px; позиція: відносна;  .flipBtn, .flipBtn_face ширина: 100%; висота: 100%; позиція: абсолютна;  
    3. Встановіть обличчя 3 кнопок

    Ми додаємо фонові зображення до обличчя передньої і задньої кнопок і встановлюємо прохолодний лінійний градієнт за зображеннями для обох. Головне в тому, що в CSS ви можете встановити декілька зображень як фонове зображення для одного елемента, а також можете оголосити градієнти як фонові зображення..

    Середнє обличчя, .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; 

    До покрити простір між передньою та задньою гранями з середнім, ми покласти середню поверхню плоскою через x-площину 3D-простору за допомогою transform: rotateX (90deg); правило робить його перпендикулярним на передню і задню кнопки обличчя на y-площині.

    Оскільки середня грань була прокладена плоскою по площині x, її верхня точка на осі y проходить на 10px (половина її висоти) вниз від оригіналу. Так, щоб витягнути його назад та вирівняти його вершину з двома іншими кнопками обличчя, я додав зверху: -10px правило.

    Я використав видимість Властивість CSS для передньої поверхні, тому, коли ми перевертаємо кнопку, тильна сторона передньої поверхні не буде видно.

    Поки ви побачите лише передню грань на екрані, оскільки x-площина прихована від зору, а на y-площині (екрані) останнє обличчя, що лежало, було спереду. Обертаючи кнопку Ви також зможете побачити інші обличчя.

    Кнопка
    4. Поворот кнопки

    Властивість CSS у стилі перетворення визначає, чи відображаються дочірні елементи HTML-елемента плоскими або розташованими в 3D-просторі. У фрагменті коду нижче стиль перетворення: preserve-3d; правило дає 3D гучність нашій кнопці, в той час як transform: rotatexX () властивість обертає його навколо осі x.

     .flipBtn стиль перетворення: preserve-3d; transform: rotateX (-120deg);  

    Зверніть увагу, що я використовував -120deg виключно для демонстраційних цілей, оскільки таким чином простіше проілюструвати роботу обертання кнопки.

    Кнопка обертається на -120 °

    Однак на наступному етапі ми змінимо його -180deg щоб повністю повернути кнопку.

    5. Анімація кнопки

    На цьому етапі наша кнопка 3D ще не анімована. Ми можемо зробити це за допомогою перехід власності. Ми використовуємо перетворення властивість для першого значення, оскільки це властивість, для якої потрібно застосувати ефект переходу. Друге значення - це тривалість, 2s.

    Давайте зробимо кнопку тільки обертатися на hover, тому замість .flipBtn Селектор, давайте використовувати .flipBtnWrapper: hover .flipBtn. Як згадувалося раніше, також змінюється значення rotateX () до -180deg щоб перевернути кнопку.

     .flipBtn transition: transform 2s; стиль перетворення: preserve-3d;  .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg); 

    Зверніть увагу, що в Github repo, I до кожної кнопки додано прапорець для того, щоб увімкнути анімацію : перевірено а не на : hover, таким чином він веде себе як реальна кнопка. Я також включив чотири різні кнопки з чотирма напрямками перевертання (Top → Bottom, Bottom → Top, Right → Left і Left → Right), так що ви можете легко використовувати який завгодно.

    • Переглянути демонстрацію
    • Завантажити джерело