Создание кнопки 3D Flip с использованием HTML и CSS

Опубликовано: 30 Ноября, 2021

Создание 3D-эффектов - одна из самых требовательных задач веб-дизайна. В этой статье мы научимся реализовывать эффект анимации кнопки 3D Flip с помощью простых HTML и CSS. В этом эффекте всякий раз, когда пользователь наводит курсор на кнопку, отображается анимация переворота в трехмерном виде.

HTML-код: в этом разделе мы будем использовать тег привязки и использовать CSS для разработки кнопки.

HTML

 <!DOCTYPE html>
 < html >
 
< body >
    < a href = "#" >
        < span >GeeksForGeeks</ span >
    </ a >
 </ body >
 
</ html > 

Раздел CSS: В этом разделе мы будем использовать некоторые свойства CSS для создания 3D-эффекта.

Свойство transform-style используется для определения того, что эффект должен сохранять трехмерное позиционирование, чтобы эффект выглядел правильно. Селектор: hove r можно использовать для выбора гиперссылки и использования свойства преобразования. Значение rotateX () используется для поворота кнопки при наведении курсора на кнопку.

Код CSS:

CSS

 <style>
      body {
      display : flex;
      min-height : 100 vh;
      align-items: center ;
      justify- content : center ;
      background : white ;
    }
 
    a {
      position : relative ;
      padding : 20px 40px ;
      background : black ;
      color : white ;
      text-decoration : none ;
      transform-style: preserve -3 d;
      transition: ease-in-out 3 s;
    }
 
    a:hover {
      transform: rotateX( 360 deg);
    }
 
    a span {
      display : block ;
      font-weight : bold ;
      transform-style: preserve -3 d;
    }
 </style>

Полный код: в этом разделе мы объединим два вышеупомянутых раздела, чтобы создать законченный эффект.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < style >
        body {
            display: flex;
            min-height: 100vh;
            align-items: center;
            justify-content: center;
            background: white;
        }
 
        a {
            position: relative;
            padding: 20px 40px;
            background: black;
            color: white;
            text-decoration: none;
            transform-style: preserve-3d;
            transition: ease-in-out 3s;
        }
 
        a:hover {
            transform: rotateX(360deg);
        }
 
        a span {
            display: block;
            font-weight: bold;
            transform-style: preserve-3d;
        }
    </ style >
 </ head >
 
< body >
    < a href = "#" >
        < span >GeeksForGeeks</ span >
    </ a >
 </ body >
 
</ html > 

Выход:

Technical Scripter Вопросы о Web технологиях HTML CSS-Misc HTML-Misc CSS

Создание кнопки 3D Flip с использованием HTML и CSS

HTML

CSS

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ