Cómo crear animaciones de botón 3D con CSS

s uno en el otro, dos para las caras delantera y trasera del botón, y una tercera para llenar la profundidad en el medio. Ponemos las tres caras de los botones en el contenedor .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.

4. Girando el botón

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.

Sin embargo, en el siguiente paso lo cambiaremos a -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