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

20 libros electrónicos gratis para vendedores de redes sociales

20 libros electrónicos gratis para vendedores de redes sociales

El marketing en redes sociales está ganando su lugar como una de las profesiones más buscadas en el mundo en línea. Aunque cualquiera con un control sobre cómo funcionan los medios sociales puede comenzar a comercializar una marca en estas redes . Sin embargo, hay un montón de material informativo sobre el tema, incluyendo hojas de prueba e informes, pero el más útil y completo de dicho material son los libros electrónicos .Por eso

(Consejos de tecnología y diseño)

Guía de diseñadores y desarrolladores para .htaccess

Guía de diseñadores y desarrolladores para .htaccess

Entre las diversas herramientas para personalizar su servidor web, el archivo de configuración .htaccess es un gran activo. Puede restablecer rápidamente los tipos de documentos, los motores de análisis, los redireccionamientos de URL y muchas otras funciones cruciales. Los webmasters que no son muy técnicos pueden no entrar en los detalles de la administración de su propio archivo .htac

(Consejos de tecnología y diseño)