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

Optimización de la velocidad de WordPress con iconos de redes sociales personalizadas

Optimización de la velocidad de WordPress con iconos de redes sociales personalizadas

Puede parecer una tarea fácil, pero agregar botones sociales que se comporta bien a un sitio de WordPress puede ser una molestia. Cuando digo que comportarse bien me refiero a los complementos para compartir en redes sociales simples, livianos, amigables con los recursos, rápidos y más compartidos, no son así. Ti

(Consejos de tecnología y diseño)

11 innovaciones móviles que necesitamos más que teléfonos flexibles

11 innovaciones móviles que necesitamos más que teléfonos flexibles

Con más de mil millones de usuarios de teléfonos inteligentes en todo el mundo, no es sorprendente ver que los fabricantes hacen todo lo posible para presentar incluso más innovaciones tecnológicas para el mercado de la telefonía móvil. Una de esas innovaciones que se introdujo recientemente es el teléfono flexible. LG G

(Consejos de tecnología y diseño)