es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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

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

Cómo probar el sitio web en varios navegadores y dispositivos de forma sincrónica

Cómo probar el sitio web en varios navegadores y dispositivos de forma sincrónica

El diseño web receptivo (RWD) es ahora un enfoque común en la construcción de un sitio web amigable para dispositivos móviles. Pero crear un sitio web receptivo puede ser bastante irritante cuando tienes que probar el sitio web en múltiples dispositivos y tamaños de pantalla.Digamos que tiene tres dispositivos para ejecutar la prueba, puede terminar teniendo que actualizar constantemente cada navegador en cada uno de esos dispositivos, lo que es engorroso, por decir lo menos.De mo

(Consejos de tecnología y diseño)

6 potentes funciones de Google Analytics

6 potentes funciones de Google Analytics

Google Analytics es mucho más sólido de lo que la mayoría de la gente le da crédito. Contrariamente a la creencia popular, puede hacer la mayoría de las cosas que las suites de análisis más avanzadas pueden hacer, excepto que Google lo hace de forma gratuita.Muchos diseñadores y desarrolladores web se quejan de las limitaciones de Google Analytics. A prim

(Consejos de tecnología y diseño)