Как создать 3D анимацию кнопки с помощью CSS

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

В этом посте я покажу вам, как создавать простые 3D-кнопки и добавлять к ним анимацию.

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

Читайте также: 15 красивых текстовых эффектов, созданных с помощью CSS

1. Создание HTML для кнопки 3D
   Чтобы создать кнопку 3D (с переворотом сверху → снизу), сначала мы складываем три

<

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

1. Добавление основных стилей с помощью CSS
   Мы устанавливаем свойства ширины и высоты обертки, кнопки и граней кнопок и размещаем их, используя относительное / абсолютное позиционирование техника.

.flipBtnWrapper {
  ширина: 200 пикселей;
  высота: 200 пикселей;
  положение: относительное;
}

.flipBtn,
.flipBtn_face {
  ширина: 100%;
  высота: 100%;
  положение: абсолютное;
}

1. Стиль 3 кнопки лица
   Мы добавляем фоновые изображения к передней и задней кнопкам и устанавливаем крутой линейный градиент позади изображений для обоих. Хитрость в том, что в CSS вы можете установить несколько изображений в качестве фонового изображения для того же элемента, и вы также можете объявить градиенты в качестве фоновых изображений.

Средняя грань, .flipBtn_mid, имеет высоту 20px, и такое же пространство 20px создается между передней и задней гранями. Мы достигаем последнего, используя translateZ () Функция CSS, которая перемещает элемент вдоль оси Z. Мы отодвигаем заднюю грань назад на 10px и выдвигаем переднюю грань вперед на 10px.

.flipBtn_front {
  background-image: url (“image / css-3d-flip-button-animation-play.png”),
                    линейный градиент (# FF6366 50%, # FEA56E);
  видимость задней поверхности: скрытая;
  transform: translateZ (10px);
}

.flipBtn_back {
  background-image: url (“image / css-3d-flip-button-animation-pause.png”),
                    линейный градиент (# FF6366 50%, # FEA56E);
  цвет фона: синий;
  transform: translateZ (-10px);
}

.flipBtn_mid {
  высота: 20 пикселей;
  цвет фона: # d5485a;
  преобразование: rotateX (90 градусов);
  верх: -10px;
}
Чтобы покрыть пространство между передней и задней гранями средней, мы кладем среднюю грань по горизонтальной плоскости трехмерного пространства с помощью преобразования: rotateX (90deg); правило, которое делает его перпендикулярным к передней и задней кнопкам на плоскости y.

Поскольку средняя грань была положена поперек плоскости x, ее верхняя точка на оси y опускается на 10 пикселей (на половину ее высоты) от оригинала. Итак, чтобы подтянуть его вверх и выровнять его верх с двумя другими гранями кнопок, я также добавил правило top: -10px.

Я использовал противоположная сторона-видимость Свойство CSS для передней грани, поэтому, когда мы переворачиваем кнопку, тыльная сторона лицевой стороны не будет видна.

До сих пор вы видите только переднюю грань на экране, поскольку плоскость x скрыта от глаз, а на плоскости y (экране) последняя грань была передней. Повернув кнопку, вы сможете увидеть и другие лица.
Кнопка4. Вращая кнопку
преобразование стиля Свойство CSS определяет, будут ли дочерние элементы HTML-элемента отображены плоскими или расположены в трехмерном пространстве. В приведенном ниже фрагменте кода стиль преобразования: preserve-3d; правило дает 3D-объем нашей кнопке, в то время как преобразование: rotatexX () свойство вращает его вокруг оси х.

.flipBtn {
  стиль трансформации: preserve-3d;
  преобразование: rotateX (-120 градусов);
}

Обратите внимание, что я использовал -120deg исключительно для демонстрационных целей, так как таким образом легче проиллюстрировать, как работает вращение кнопки.
Кнопка повернута на -120 °Однако на следующем шаге мы изменим его на -180 градусов, чтобы кнопка полностью перевернулась.
5. Анимация кнопки
На данный момент наша кнопка 3D все еще не анимирована. Мы можем сделать это с помощью переход имущество. Мы используем свойство transform для первого значения, так как это свойство, для которого мы хотим применить эффект перехода. Второе значение, это длительность, 2 с.

Давайте заставим кнопку вращаться только при наведении, поэтому вместо селектора .flipBtn воспользуемся .flipBtnWrapper: hover .flipBtn. Как упоминалось ранее, также измените значение rotateX () на -180deg, чтобы кнопка перевернулась.

.flipBtn {
  переход: преобразование 2с;
  стиль трансформации: preserve-3d;
}

.flipBtnWrapper: hover .flipBtn {
  преобразование: rotateX (-180 градусов);
}
Обратите внимание, что в репозитории Github я добавил флажок для каждой кнопки, чтобы анимация включалась: флажок: вместо: hover, таким образом, она ведет себя больше как настоящая кнопка. Я также включил четыре разные кнопки с четырьмя направлениями переворачивания (сверху → снизу, снизу → сверху, справа → влево и влево → вправо), чтобы вы могли легко использовать то, что захотите.