Efecto flip para imágenes

flip image effect pure vanilla js flip image effect pure vanilla js

Demostración Gist

A pedido de @Jorge Borja les traigo este nuevo aporte, el cual es un efecto muy bonito para imágenes, que al recibir un "clic" se voltean y revelan el contenido por detrás, en este caso es texto.


Para este efecto, la imagen es determinante, ya que proporciona las dimensiones que tendrá el cuadro te texto por detrás.


Instalación

Estos tutoriales siempre se basan en blogger, así que por ello, vamos a dirigirse a la edición html, buscamos ]]></b:skin> y arriba de eso pegamos el siguiente codigo:


/*! Card Flip v1.0.0 */
.cardFlip{-webkit-perspective:2000px;perspective:2000px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:relative;display:inline-block;cursor:pointer;font-size:10px}.cardFlip.is-active .cardFlip__cover{-webkit-transform:rotateY(180deg) translateZ(0);transform:rotateY(180deg) translateZ(0)}.cardFlip__back{text-align:center;position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transform:rotateY(-180deg) translateZ(0);transform:rotateY(-180deg) translateZ(0);background:#414961;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cardFlip__back,.cardFlip__cover{-webkit-backface-visibility:hidden;backface-visibility:hidden;color:#fff;-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.cardFlip.is-active .cardFlip__back,.cardFlip__cover{-webkit-transform:rotateY(0) translateZ(0);transform:rotateY(0) translateZ(0)}.cardFlip__cover img{max-width:100%;margin:0;padding:0}
/*options*/
.cardFlip__back {
    padding: 1em; /*Relleno*/
    font-size: 2em; /*tamaño del texto*/
}

Ahora vamos a instalar colores de material design, estos nos servirán para personalizar los fondos de los textos, para ello buscamos nuevamente ]]></b:skin> y arriba de eso pegamos el siguiente codigo:


/*! Material Colors (500) */
.md--red {background-color:#F44336;}
.md--pink {background-color:#E91E63;}
.md--purple {background-color:#9C27B0;}
.md--deep-purple {background-color:#673AB7;}
.md--indigo {background-color:#3F51B5;}
.md--blue {background-color:#2196F3;}
.md--light-blue {background-color:#03A9F4;}
.md--cyan {background-color:#00BCD4;}
.md--teal {background-color:#009688;}
.md--green {background-color:#4CAF50;}
.md--light-green {background-color:#8BC34A;}
.md--lime {background-color:#CDDC39;}
.md--yellow {background-color:#FFEB3B;}
.md--amber {background-color:#FFC107;}
.md--orange {background-color:#FF9800;}
.md--deep-orange {background-color:#FF5722;}
.md--brown {background-color:#795548;}
.md--grey {background-color:#9E9E9E;}
.md--blue-grey {background-color:#607D8B;}

Ahora necesitamos darle función a las imágenes, con el fin de que al recibir un "clic", se agregue una clase, que en este caso será "is-active", para ello buscamos </body> y arriba de eso pegamos el siguiente codigo:


<script>//<![CDATA[
//Card Flip v1.0.0
var cardFlip = document.querySelectorAll(".cardFlip");
[].forEach.call(cardFlip, function(a) {
    a.addEventListener("click", btntoggle, false)
});
function btntoggle() {
    this.classList.toggle("is-active")
};
//]]></script>

Uso básico

Pegamos la siguiente estructura html en cualquier parte donde queramos usar el efecto, reemplazando {url:image} y {Texto} por sus valores correspondientes:


<div class='cardFlip'>
   <div class='cardFlip__cover'><img src="{url:image}"/></div>
   <div class='cardFlip__back {color[opcional]}'>{Texto}</div>
</div>

También tenemos la opción, de personalizar el color de fondo de los textos, utilizando los colores de material design, para ello solo reemplazamos {color[opcional]}, por md--red, md--pink, md--purple, md--deep-purple, etc.:


Si deseas modificar el relleno y de fuente, modifica las opciones que agregue en el css:


/*options*/
.cardFlip__back {
    padding: 1em; /*Relleno*/
    font-size: 2em; /*tamaño del texto*/
}

Eso ha sido todo amigos, si te ha servido el aporte no olvides compartir, ayudaras a mas personas y lo agradeceria mucho tambien.