ESCAPARATE DIGITAL 2019: GALERÍA DE IMÁGENES GIRATORIA PARA BLOGGER

GALERÍA DE IMÁGENES GIRATORIA PARA BLOGGER

Si buscas una manera diferente de presentar imagenes, aqui te traigo otra alternativa mas de las muchas que he presentado en este blog.
Como se puede apreciar, las imagenes van pasando sin parar, rotando como si de una noria de feria se tratase.

Esta galeria esta integramente realizada con CSS3, utilizando propiedades como perspective y transform-style que le dan este aspecto 3D.

Solo tienes que ponerlo en un Gadget “HTML-Javascript” y colocrlo donde mas te interese.

Modo de instalarlo:

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

Despues de haber insertado el código, un clic en "Guardar"

"Stu Nicholls" es su creador y te puedes descargar el codigo completo haciendo click aqui

Si no quieres Descargarlo y quieres Copiarlo Aquí te lo dejo:

<div class="container">
<div class="rotate">
<img class="p1" src="URL DE LA IMAGEN" alt="" />
<img class="p2" src="URL DE LA IMAGEN" alt="" />
<img class="p3" src="URL DE LA IMAGEN" alt="" />
<img class="p4" src="URL DE LA IMAGEN" alt="" />
<img class="p5" src="URL DE LA IMAGEN" alt="" />
<img class="p6" src="URL DE LA IMAGEN" alt="" />
<img class="p7" src="URL DE LA IMAGEN" alt="" />
<img class="p8" src="URL DE LA IMAGEN" alt="" />
<img class="p9" src="URL DE LA IMAGEN" alt="" />
</div>
</div>

<style type="text/css">
.container {width:480px; height:280px; margin:250px 0;
-webkit-perspective:1200px;
perspective:1200px;
}
.rotate {width:480px; height:280px; position:relative;
-webkit-transform-style:preserve-3d; /* for Chrome */
transform-style:preserve-3d; /* for Firefox */
/* IE10 does not support preserve-3d so will ignore the above */
-webkit-transform: translate3d(0,0,-700px);
-webkit-perspective:1200px;
transform: translate3d(0,0,-700px);
perspective:1200px;
}
.rotate img {width:480px; height:280px; position:absolute; left:0; top:0; perspective:1200px;}

.p1 {
-webkit-animation:spin1 10s infinite linear;
animation:spin1 10s infinite linear;
}
.p2 {
-webkit-animation:spin2 10s infinite linear;
animation:spin2 10s infinite linear;
}
.p3 {
-webkit-animation:spin3 10s infinite linear;
animation:spin3 10s infinite linear;
}
.p4 {
-webkit-animation:spin4 10s infinite linear;
animation:spin4 10s infinite linear;
}
.p5 {
-webkit-animation:spin5 10s infinite linear;
animation:spin5 10s infinite linear;
}
.p6 {
-webkit-animation:spin6 10s infinite linear;
animation:spin6 10s infinite linear;
}
.p7 {
-webkit-animation:spin7 10s infinite linear;
animation:spin7 10s infinite linear;
}
.p8 {
-webkit-animation:spin8 10s infinite linear;
animation:spin8 10s infinite linear;
}
.p9 {
-webkit-animation:spin9 10s infinite linear;
animation:spin9 10s infinite linear;
}

/* for Chrome */
@-webkit-keyframes spin1 {
0% {-webkit-transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); opacity:1;}
55% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); opacity:1;}
}
@-webkit-keyframes spin2 {
0% {-webkit-transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); opacity:0.9;}
44% {opacity:0.5;}
88% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); opacity:0.9;}
}
@-webkit-keyframes spin3 {
0% {-webkit-transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); opacity:0.8;}
33% {opacity:0.5;}
77% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); opacity:0.8;}
}
@-webkit-keyframes spin4 {
0% {-webkit-transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); opacity:0.7;}
22% {opacity:0.5;}
66% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); opacity:0.7;}
}
@-webkit-keyframes spin5 {
0% {-webkit-transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); opacity:0.6;}
11% {opacity:0.5;}
55% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); opacity:0.6;}
}
@-webkit-keyframes spin6 {
0% {-webkit-transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); opacity:0.6;}
44% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); opacity:0.6;}
}
@-webkit-keyframes spin7 {
0% {-webkit-transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); opacity:0.7;}
33% {opacity:1;}
88% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); opacity:0.7;}
}
@-webkit-keyframes spin8 {
0% {-webkit-transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); opacity:0.8;}
22% {opacity:1;}
77% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); opacity:0.8;}
}
@-webkit-keyframes spin9 {
0% {-webkit-transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); opacity:0.9;}
11% {opacity:1;}
66% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); opacity:0.9;}
}

/* IE10 require z-index to stack the images in the right order - other browsers use preserve-3d */
@keyframes spin1 {
0% {transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); z-index:10; opacity:1;}
11% {opacity:1; z-index:10;}
55% {opacity:0.6; z-index:6;}
100% {transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); z-index:10; opacity:1;}
}
@keyframes spin2 {
0% {transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); z-index:9; opacity:0.9;}
44% {opacity:0.5; z-index:6;}
88% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); z-index:9; opacity:0.9;}
}
@keyframes spin3 {
0% {transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); z-index:8; opacity:0.8;}
33% {opacity:0.5; z-index:6;}
77% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); z-index:8; opacity:0.8;}
}
@keyframes spin4 {
0% {transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); z-index:7; opacity:0.7;}
22% {opacity:0.5; z-index:6;}
66% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); z-index:7; opacity:0.7;}
}
@keyframes spin5 {
0% {transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); z-index:6; opacity:0.6;}
11% {opacity:0.5; z-index:6;}
55% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); z-index:6; opacity:0.6;}
}
@keyframes spin6 {
0% {transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); z-index:6; opacity:0.6;}
44% {opacity:1; z-index:10;}
88% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); z-index:6; opacity:0.6;}
}
@keyframes spin7 {
0% {transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); z-index:7; opacity:0.7;}
33% {opacity:1; z-index:10;}
77% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); z-index:7; opacity:0.7;}
}
@keyframes spin8 {
0% {transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); z-index:8; opacity:0.8;}
22% {opacity:1; z-index:10;}
66% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); z-index:8; opacity:0.8;}
}
@keyframes spin9 {
0% {transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); z-index:9; opacity:0.9;}
11% {opacity:1; z-index:10;}
55% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); z-index:9; opacity:0.9;}
}

</style>