Flip de imagen de fondo CSS
En esta guía, haremos todas estas técnicas de volteo utilizando las propiedades de CSS. Aquí, aprenderemos sobre la imagen Flip en CSS utilizando diferentes propiedades.
Ejemplo 1:
Para voltear la imagen en CSS, debemos tener el código HTML donde agregamos la imagen. Luego, creamos un archivo CSS para aplicar las propiedades para que nuestra imagen se voltee. Podemos voltear nuestra imagen en cualquier dirección de nuestra elección. Tenemos el código de Visual Studio donde tenemos que realizar estos ejemplos. Entonces, abrimos el archivo y seleccionamos el idioma como "html" y creamos este archivo html. Entonces, tenemos que hacer un código aquí que se proporciona en la siguiente imagen. Cuando completamos este código, tenemos que guardarlo.
Para mostrar el encabezado en la parte superior de la página, agregamos el "
" etiqueta. Luego tenemos un párrafo, y este párrafo se muestra al lado del encabezado. Después de esto, hacemos el código principal que está agregando el código de imagen. Agregamos la imagen después del encabezado y el párrafo. Usamos la etiqueta "" y en su "SRC". Damos la ruta o el nombre de la imagen que queremos agregar. Establecemos su valor de ancho en "400" y su valor de altura en "300". También establecemos este ancho y altura en nuestro archivo CSS. Ahora, nos movemos para crear nuestro archivo CSS en el que usamos las diferentes propiedades para que nuestra imagen sea una imagen de volteo.
Usamos el selector de imagen "flotar". Se usa para seleccionar la imagen cuando el cursor se mueve sobre la imagen. El "WebKit-Transform" es la propiedad CSS que se utiliza para transformar la imagen en 2-D y 3-D. Podemos rotar nuestra imagen usando esta. El "scalex" se usa para rotar la imagen en la dirección horizontal. Este código girará la imagen horizontalmente cuando movemos el cursor sobre esta imagen.
Esta es la imagen original antes de mover el cursor sobre la imagen. Cuando pasamos sobre esta imagen, gira en la dirección horizontal.
La imagen rotada también se muestra en lo siguiente:
Aquí, puede ver que la imagen gira horizontalmente. La imagen anterior es la imagen girada después de mover el cursor sobre la imagen.
Ejemplo #2:
Este es el archivo HTML. Puede ver que agregamos una imagen aquí en este código. Usamos la "casa.imagen de png "en este ejemplo.
Establecemos la imagen "Ancho" en "500px" y la imagen "Altura" en "400px". Después de esto, tenemos una imagen "flotar" que "transforma" la imagen en el eje horizontal cuando el cursor se cierne sobre esta imagen.
Producción:
La imagen anterior es la imagen original antes de la transformación en el eje horizontal. La siguiente imagen es la imagen después de la transformación cuando movemos el cursor sobre la imagen. Puede ver fácilmente la diferencia entre la imagen anterior y la siguiente imagen dada.
Ejemplo #3:
Aquí, los valores de "ancho" y "altura" son los mismos, y la imagen es la misma. Pero giramos la imagen verticalmente después de flotar sobre la imagen. Entonces, usamos la "transformación" y lo establecemos en "escala (-1)" para que gire nuestra imagen en la dirección vertical.
Ahora, vea que la imagen gira en la dirección vertical cuando pasamos sobre esta imagen. Aquí, la imagen se muestra en una dirección al revés que gira verticalmente después de flotar sobre esto.
Ejemplo #4:
En este código, usamos los dos valores en la "escala". Usamos la "transformación". En su "escala", pasamos los dos valores "-1, -1" que gira la imagen en las direcciones verticales y horizontales. Cuando movemos el mouse en esta imagen, gira en ambas direcciones.
Vea que la imagen se gira tanto en el eje vertical como horizontal cuando pasamos sobre ella. La imagen anterior es la imagen después de flotar sobre la imagen original.
Ejemplo #5:
Este ejemplo es diferente de los ejemplos anteriores. Creamos las diferentes clases de DIV usando los diferentes nombres. La primera clase Div se llama "Flip-Box". La segunda clase Div es nombrar el "Flip-Box-Inner". Y la tercera clase Div se llama "Flip-Box-Front". Después de definir todas estas clases Div, colocamos una imagen llamada "Myimage.jpeg ". Luego creamos otro "Div" con un nombre de "Flip-Box-Back". Ahora escribimos algunos párrafos en este div. Usamos todas estas clases de DIV en nuestro archivo CSS.
Usamos el "cuerpo" y la "familia de fuentes" a "Arial". Luego, establecemos el ancho y la altura del contenedor "Flip Box" en "600px" y "400px", respectivamente. Ahora, agregamos el "borde" y lo colocamos en "1px" en su ancho con un tipo "sólido" para que podamos mostrar que cuando esta imagen se voltea, sale de la caja cuando movemos el cursor sobre él. Agregamos la "perspectiva" y la establecemos en "1000px". Lo usamos cuando debemos agregar algún efecto tridimensional a la imagen.
Ahora, tenemos otro contenedor que es un "Flip-Box-Inner". Este contenedor establece la posición del frente y la parte posterior de la imagen. Establecimos la "posición" en "relativo" y el "ancho" y "altura" a "100px". Utilizamos la propiedad de "transición" para controlar la velocidad de animación y establecerla en "0.8s ".
Después de esto, usamos el "estilo de transformación" para representar la imagen en el espacio tridimensional. Lo establecemos en "Preserve-3D". Luego, tenemos una "bandeja de flip" flotante, por lo que cuando nos desplazamos sobre la imagen, se moverá en la dirección horizontal ya que usamos la "transformación" para "rotar" y configurarlo en "180deg". Tenemos el "Flip-Box-Front" y "Flip-Box-Back". Entonces, damos la posición a ambos aquí. Establecimos la "posición" para ambos en "absoluto". La "altura" y "ancho" para ambos contenedores se establecen en "100px" y "100px", respectivamente. También establecemos la "visibilidad webkit-backface" en "oculto". Esta propiedad se usa cuando giramos la imagen y la establecemos aquí si el usuario verá la cara posterior de la imagen o no.
Entonces, aquí, lo ocultamos usando la etiqueta "Oculta" con esta propiedad. Ahora, diseñamos el lado frontal usando un contenedor "Flip-Box-Front". Establecemos el "color de fondo" en "#BBB" y el "color" de la fuente o texto en "negro". Finalmente, diseñamos la parte posterior de la imagen usando el "Flip-Box-Back". Su "color de fondo" está configurado en "gris", y la fuente "color" está establecida en "blanco". Usamos la propiedad "Transformar" y establecemos su valor en "Rotatey (180deg)".
En la salida, tenemos las múltiples imágenes en las que puede notar la rotación de la imagen. En la última imagen, la parte posterior de la imagen también se muestra aquí. Puedes ver cómo gira cuando pasamos sobre esta imagen. Todo el texto que hemos escrito en el código HTML aparecerá en la parte posterior de la imagen cuando esta imagen gire después de flotar.
Conclusión
En esta guía, utilizamos el concepto de flip de imagen en CSS. Realizamos los diferentes ejemplos de intersección aquí. Volteamos nuestra imagen en la dirección vertical o en la dirección horizontal o en ambas direcciones después de flotar. También realizamos un ejemplo en el que giramos nuestra imagen a 180 grados cuando pasamos la imagen sobre la imagen. Utilizamos las propiedades de CSS en todos los ejemplos y representamos todas las salidas en esta guía. Verá cómo la imagen se voltea o gira vertical y horizontalmente.