Как создать 3D анимацию кнопки с помощью CSS
Флип анимации популярные CSS-эффекты, которые показывают как спереди, так и сзади элемента HTML, поворачивая их сверху вниз или слева направо (и наоборот). Они рад в двух измерениях, но они даже круче, когда выполняются в 3D.
В этом посте я покажу вам, как создавать простые 3D кнопки, а также добавить анимацию флип им.
Вы можете увидеть результат на демонстрации ниже, если вы нажмете на кнопки, они выполнят помеченную анимацию сальто.
1. Создание HTML для кнопки 3D
Чтобы создать кнопку 3D (с переворотом Top → Bottom), сначала мы складываем три Мы устанавливаем Мы добавляем фоновые изображения к передней и задней кнопкам и устанавливаем крутой линейный градиент позади изображений для обоих. Хитрость в том, что в CSS вы можете установить несколько изображений в качестве фонового изображения для одного и того же элемента, а также можете объявить градиенты в качестве фоновых изображений.. Среднее лицо, к покрыть пространство между передней и задней гранями со средней, мы положите среднюю поверхность лица через плоскость X трехмерного пространства, используя Поскольку средняя грань была положена поперек плоскости x, ее верхняя точка на оси y опускается на 10 пикселей (на половину ее высоты) от оригинала. Итак, чтобы вытащить его обратно и выровнять его верх с двумя другими гранями кнопок, я добавил Я использовал До сих пор вы видите только переднюю грань на экране, поскольку плоскость x скрыта от глаз, а на плоскости y (экране) последняя грань была передней. Вращая кнопку вы сможете увидеть и другие лица. Свойство CSS в стиле transform определяет, будут ли дочерние элементы HTML-элемента отображены плоскими или расположены в трехмерном пространстве. В приведенном ниже фрагменте кода Обратите внимание, что я использовал Однако на следующем шаге мы изменим его на На данный момент наша кнопка 3D все еще не анимирована. Мы можем сделать это с помощью Давайте заставим кнопку вращаться только при наведении, так что вместо Обратите внимание, что в репозитории Github я добавил флажок для каждой кнопки чтобы запустить анимацию на .flipBtn контейнер, который будет функционировать как кнопка 3D, и мы помещаем кнопку 3D в .flipBtnWrapper обертка.
2. Добавление основных стилей с помощью CSS
ширина а также рост свойства оболочки, кнопки и граней кнопок и расположите их, используя метод относительного / абсолютного позиционирования. .flipBtnWrapper width: 200px; высота: 200 пикселей; положение: относительное; .flipBtn, .flipBtn_face width: 100%; высота: 100%; положение: абсолютное;
3. Стиль 3 кнопки лица
.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 height: 20px; цвет фона: # d5485a; преобразование: rotateX (90 градусов); верх: -10px; преобразование: rotateX (90 градусов); править этим делает его перпендикулярным на передней и задней кнопках на плоскости Y.верх: -10px править также.противоположная сторона-видимость Свойство CSS для передней грани, поэтому, когда мы переворачиваем кнопку, тыльная сторона лицевой стороны не будет видна.
4. Вращая кнопку
стиль трансформации: preserve-3d; Правило дает 3D-объем нашей кнопки, в то время как преобразование: rotatexX () свойство вращает его вокруг оси х. .flipBtn transform-style: preserve-3d; преобразование: rotateX (-120 градусов);
-120deg исключительно для демонстрационных целей, так как таким образом легче проиллюстрировать, как работает вращение кнопки.
-180deg чтобы кнопка полностью перевернулась.5. Анимация кнопки
переход имущество. Мы используем преобразование свойство для первого значения, так как это свойство, для которого мы хотим применить эффект перехода. Второе значение, это продолжительность, 2s..flipBtn селектор, давайте использовать .flipBtnWrapper: hover .flipBtn. Как упоминалось ранее, также измените значение rotateX () в -180deg заставить кнопку вертеться. .flipBtn transition: transform 2s; стиль трансформации: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: проверено а не на : парить, таким образом он ведет себя как настоящая кнопка. Я также включил четыре разные кнопки с четырьмя направлениями пролистывания (сверху → снизу, снизу → сверху, справа → влево и влево → вправо), чтобы вы могли легко использовать любое нужное вам.
