Cómo crear animaciones de botón 3D con CSS
Las animaciones invertidas son efectos populares de CSS que muestran tanto el anverso como el reverso de un elemento HTML al girarlos de arriba a abajo, o de izquierda a derecha (y viceversa). Son rad en 2 dimensiones, pero son incluso más fríos cuando se realizan en 3D.
En esta publicación, te mostraré cómo crear botones 3D simples y agregarles animaciones invertidas .
Puede ver el resultado en la demostración a continuación, si hace clic en los botones, realizarán la animación etiquetada flip.
1. Creando el HTML para el botón 3D
Para crear un botón 3D (con Arriba → Abajo invertido), primero apilamos tres
.flipBtn
que funcionará como el botón 3D, y colocamos el botón 3D en el contenedor .flipBtnWrapper
.2. Agregar estilos básicos con CSS
Establecemos las propiedades de width
y height
de la envoltura, el botón y las caras de los botones, y los posicionamos usando la técnica de posicionamiento relativo / absoluto.
.flipBtnWrapper {ancho: 200px; altura: 200px; posición: relativa; } .flipBtn, .flipBtn_face {ancho: 100%; altura: 100%; posición: absoluta; }
3. Estilo las 3 caras del botón
Agregamos imágenes de fondo a las caras de los botones frontal y posterior, y establecemos un degradado lineal fresco detrás de las imágenes para ambos. El truco aquí es que en CSS, puede establecer múltiples imágenes como imagen de fondo para el mismo elemento, y también puede declarar gradientes como imágenes de fondo.
La cara del medio, .flipBtn_mid
, tiene una height
de 20 px, y se crea un mismo espacio de 20 px entre las caras frontal y posterior. Logramos esto último utilizando la función CSS translateZ()
que mueve un elemento a lo largo del eje z . Empujamos la parte posterior de la espalda hacia atrás 10px, y llevamos la cara frontal hacia delante 10px.
.flipBtn_front {background-image: url ("imagen / css-3d-flip-button-animation-play.png"), gradiente lineal (# FF6366 50%, # FEA56E); visibilidad de la cara posterior: oculta; transformar: translateZ (10px); } .flipBtn_back {background-image: url ("image / css-3d-flip-button-animation-pause.png"), gradiente lineal (# FF6366 50%, # FEA56E); color de fondo: azul; transformar: translateZ (-10px); } .flipBtn_mid {height: 20px; color de fondo: # d5485a; transformar: rotateX (90deg); arriba: -10px; }
Para cubrir el espacio entre las caras frontal y posterior con la del medio, colocamos la cara del medio plana sobre el plano x del espacio tridimensional utilizando la transform: rotateX(90deg);
regla que lo hace perpendicular a las caras del botón frontal y posterior en el plano y.
Como la cara del medio se extendió plana a lo largo del plano x, su punto superior en el eje y va 10px (la mitad de su altura) hacia abajo desde el original. Entonces, para volver a subir y alinear su parte superior con las otras dos caras de los botones, agregué la regla top: -10px
también.
backface-visibility
propiedad CSS de backface-visibility
la backface-visibility
la backface-visibility
frontal, por lo que cuando volteamos el botón, la parte posterior de la cara frontal no estará visible.
Hasta ahora, solo verá la cara frontal en la pantalla, ya que el plano x está oculto a la vista, y en el plano y (pantalla), la última cara colocada fue la parte frontal. Al girar el botón, también podrás ver las otras caras.

La propiedad CSS de estilo de transformación determina si los elementos secundarios de un elemento HTML se muestran planos, o si se ubican en el espacio 3D. En el fragmento de código a continuación, el transform-style: preserve-3d;
rule le da volumen 3D a nuestro botón, mientras que la propiedad transform: rotatexX()
rota alrededor del eje x.
.flipBtn {transform-style: preserve-3d; transformar: rotateX (-120deg); }
Tenga en cuenta que utilicé -120deg
únicamente para fines de demostración, ya que de esta manera es más fácil ilustrar cómo funciona la rotación del botón.

-180deg
para hacer que el botón se mueva por completo.5. Animar el botón
En este punto, nuestro botón 3D aún no está animado. Podemos hacer esto usando la propiedad de transition
. Usamos la propiedad de transform
para el primer valor, ya que esta es la propiedad para la que queremos aplicar el efecto de transición. El segundo valor es la duración, 2s
.
Hagamos que el botón solo gire al pasar el .flipBtn
, por lo tanto, en lugar del selector .flipBtn
, usemos .flipBtnWrapper:hover .flipBtn
. Como se mencionó anteriormente, también cambie el valor de rotateX()
a -180deg
para hacer que el botón se dé la vuelta.
.flipBtn {transition: transform 2s; transform-style: preserve-3d; } .flipBtnWrapper: hover .flipBtn {transform: rotateX (-180deg); }
Tenga en cuenta que en el repositorio de Github, agregué una casilla de verificación a cada botón para activar la animación :checked
lugar de :checked
:hover
el :hover
, de esta manera se comporta más como un botón real. También incluí cuatro botones diferentes con cuatro direcciones invertidas (Superior → Inferior, Inferior → Superior, Derecha → Izquierda e Izquierda → Derecha), para que pueda usar fácilmente lo que quiera.
- Ver demostración
- Descargar Fuente

Crea hermosas transiciones de degradado con Granim.js
El diseño web está lleno de belleza y un diseño de interfaz agradable. Algunas características son funcionales, mientras que otras son solo para mostrar. Las transiciones de degradado son exclusivas para mostrar, ¡ pero tienen un gran impacto!Con Granim.js, puede crear transiciones personalizadas de gradientes a todo color que se vean sin problemas y se acoplen muy bien con cualquier sitio web.Pued

Aprenda Adobe XD gratis con esta guía web
Si planea aprender el nuevo software de UI / UX de Adobe, tenga en cuenta que tendrá una curva de aprendizaje bastante grande, ya que Adobe XD es una herramienta de diseño realmente compleja. Sin embargo, si desea acelerar el proceso de aprendizaje, eche un vistazo a esta guía publicada por XD Guru.Es