Cómo crear animaciones de botones 3D con CSS
Animaciones Flip Son los efectos populares de CSS que muestran tanto la parte delantera como la trasera de un elemento HTML girándolos de arriba a abajo o de izquierda a derecha (y viceversa). Son rad en 2 dimensiones, pero son aún más frescas cuando se realizan en 3D.
En este post, te mostraré cómo crear botones simples en 3D, y añadir animaciones flip a ellos.
Puede ver el resultado en la demostración a continuación, si hace clic en los botones, realizarán la animación rotatoria etiquetada..
1. Creando el HTML para el botón 3D
Para crear un botón 3D (con Top → Flip inferior), primero apilamos tres Establecemos el Agregamos imágenes de fondo a las caras de los botones frontal y posterior, y establecemos un gradiente lineal fresco detrás de las imágenes para ambos. El truco aquí es que en CSS, puede configurar varias imágenes como imagen de fondo para el mismo elemento, y también puede declarar los gradientes como imágenes de fondo.. La cara media, A cubrir el espacio entre las caras frontal y posterior con la del medio, nos coloca la cara media plana a través del plano x del espacio 3D usando el Dado que la cara media se colocó plana en el plano x, su punto superior en el eje y se desplaza 10px (la mitad de su altura) desde el original. Entonces, para levantarlo y alinear su parte superior con las otras dos caras de los botones, agregué el Usé el Hasta el momento, solo verá la cara frontal en la pantalla, ya que el plano x está oculto de la vista, y en el plano y (pantalla) la última cara colocada fue la frontal. Girando el botón Podrás ver las otras caras también.. La propiedad CSS de estilo de transformación determina si los elementos secundarios de un elemento HTML se muestran planos o se colocan en el espacio 3D. En el siguiente fragmento de código, el Tenga en cuenta que he utilizado Sin embargo en el siguiente paso lo cambiaremos a En este punto, nuestro botón 3D todavía no está animado. Podemos hacer esto usando el Hagamos que el botón gire solo al pasar el mouse, así que en lugar de Tenga en cuenta que en el repositorio de Github, añadido una casilla de verificación a cada botón con el fin de disparar la animación en .flipbtn contenedor que funcionará como el botón 3D, y colocamos el botón 3D en el .flipBtnWrapper envoltura.
2. Añadiendo estilos básicos con CSS.
anchura y altura Las propiedades de la envoltura, el botón y las caras de los botones, y posicionarlos utilizando 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. Diseña las caras de los 3 botones.
.flipbtn_mid, se le da un altura de 20px, y se crea un mismo espacio de 20px entre las caras frontal y posterior. Logramos esto último utilizando el traducirZ () Función CSS que mueve un elemento a lo largo del eje z. Empujamos la cara posterior hacia atrás 10px, y acercamos la cara frontal hacia 10px.. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), gradiente lineal (# FF6366 50%, # FEA56E); Backface-visibilidad: oculto; 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 altura: 20px; color de fondo: # d5485a; transformar: rotateX (90deg); arriba: -10px; transformar: rotateX (90deg); gobernar eso lo hace perpendicular Tanto el botón frontal como el posterior se enfrentan en el plano y.arriba: -10px gobernar también.visibilidad del reverso Propiedad de CSS para la cara frontal, por lo que cuando giramos el botón, la parte posterior de la cara frontal no será visible.
4. Girando el botón
transform-style: preserve-3d; La regla le da volumen 3D a nuestro botón, mientras que transformar: rotatexX () La propiedad lo gira alrededor del eje x. .flipBtn transform-style: preserve-3d; transformar: rotateX (-120deg);
-120 grados solo para fines de demostración, ya que de esta manera es más fácil ilustrar cómo funciona la rotación de botones.
-180 grados para hacer que el botón gire completamente.5. Animando el botón.
transición propiedad. Usamos el transformar propiedad 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..flipbtn selector, vamos a usar .flipBtnWrapper: hover .flipBtn. Como se mencionó anteriormente, también cambiar el valor de rotateX () a -180 grados para hacer girar el botón. .flipBtn transición: transformar 2s; transform-style: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
:comprobado en lugar de en :flotar, De esta manera se comporta más como un botón real. También incluí cuatro botones diferentes con cuatro direcciones de giro (Arriba → Abajo, Abajo → Arriba, Derecha → Izquierda y Izquierda → Derecha), para que pueda usar fácilmente lo que quiera.
