Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Creando Galería de Imágenes Giratoria 3D con CSS

La galería de imágenes es una característica muy útil de la aplicación web. Básicamente, la galería de imágenes ayuda a agrupar las imágenes en una vista fácil de usar en la página web. El efecto 3D hace que la galería de imágenes sea más atractiva y proporciona una mejor interfaz de usuario. Este tutorial le mostrará cómo puede crear una galería de imágenes 3D utilizando CSS puro en el sitio web.
Hay muchos complementos de jQuery disponibles para crear una galería de imágenes en 3D. Pero el complemento de terceros aumenta el tamaño de la página web, lo que afecta el tiempo de carga de su sitio web. Por lo tanto, si desea crear una galería de imágenes en 3D con CSS sin utilizar un complemento, nuestros conceptos de CSS en 3D lo ayudan a hacerlo fácilmente.

Carrusel giratorio 3D con CSS

Los siguientes HTML y CSS se utilizan para crear una galería giratoria 3D.
Código HTML:
Este HTML contiene todas las imágenes de la galería de imágenes 3D.
< div  id = "carrusel" >
    < figura > < img  src = "images / img1.jpg"  alt = "" > </ figure >
    < figura > < img  src = "images / img2.jpg"  alt = "" > </ figura >
    < figura > < img  src = "images / img3.jpg"  alt = "" > </ figure >
    < figura > < img  src = "images / img4.jpg"  alt = "" > </ figure >
    < figura > < img  src = "images / img5.jpg"  alt = "" > </ figure >
    < figura > < img  src = "images / img6.jpg"  alt = "" > </ figure >
    < figura > < img  src = "images / img7.jpg"  alt = "" > </ figure >
    < figura > < img  src = "images / img8.jpg"  alt = "" > </ figure >
    < figura > < img  src = "images / img9.jpg"  alt = "" > </ figure >
    < figura > < img  src = "images / img10.jpg"  alt = "" > </ figure >
</ div >
Código CSS:
el siguiente CSS agrega rotación y efecto 3D a la galería y crea la galería giratoria 3D.
# carrusel {
     ancho :  100 % ;
    altura :  100 % ;
    posición :  absoluta ;
    estilo de transformación : preservar -3 d;
    Animación : rotación 20 s infinita lineal;
}
# carrusel : flotar {
    animación-play-state : pausado;
}
#carousel  figure {
     display :  block ;
    posición :  absoluta ;
    ancho :  90 % ;
    altura :  78 % ;
    izquierda :  10 px ;
    superior :  10 px ;
    fondo :  negro ;
    desbordamiento :  oculto ;
    borde :  sólido  5 px  negro ;
}
#carousel  figure : nth-child (1) {transform : rotateY ( 0 deg ) translateZ ( 288 px );}
 #carousel  figure : nth-child (2) {transform : rotateY ( 40 deg ) translateZ ( 288 px );}
 #  figura del carrusel : nth-child (3) {transformar : rotarY ( 80 grados ) translateZ ( 288 px );}
 #carousel  figure : nth-child (4) {transformar : rotarY ( 120 grados)) traducir Z ( 288 px );}
 #  figura de carrusel : nth-child (5) {transformar : rotarY ( 160 grados ) traducirZ ( 288 px );}
 #carousel  figure : nth-child (6) {transformar : rotarY ( 200 grados ) traducir Z ( 288 px );}
 #  figura de carrusel : nth-child (7) {transformar : rotarY ( 240 grados ) traducirZ ( 288 px );}
 #carousel  figure : nth-child(8) {transformar : rotar ( 280 grados ) translateZ ( 288 px );}
 #  figura de carrusel : nth-child (9) {transformar : rotar ( 320 grados ) traducirZ ( 288 px );}
 #  figura de carrusel : nth-child (10) {transformar : rotarY ( 360 grados ) translateZ ( 288 px );}
 # carrusel img {
    -webkit-filter : escala de grises ( 1 );
    cursor :  puntero ;
    transición :  toda  la facilidad de .5 s ;
    ancho :  90 % ;
}
#carousel img : hover {
    -webkit-filter : escala de grises ( 0 );
    transformar : escala ( 1.2 , 1.2 );
}
rotación de keyframes {
    desde{
        transformar : rotarY ( 0 grados );
    }
    a{
        transformar : rotarY ( 360 grados );
    }
}
El código de ejemplo crea una galería giratoria con una transformación 3D como la pantalla de abajo. Además, al desplazarse, la imagen, la rotación de la galería se detendrán y la imagen se manipulará visualmente.
3d-image-gallery-css-codexworld

Conclusión

En el script de ejemplo, las imágenes estáticas se muestran en la galería de imágenes 3D. También puede mostrar las imágenes dinámicas en la galería de imágenes rotativas 3D utilizando PHP. Según el número de imágenes, la transformpropiedad figure:nth-child(n)debe especificarse en CSS.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas