javascript voltear imagen en ejemplo de código de clic

Mantén la atención ya que en este tutorial encontrarás el resultado que buscas.Este escrito ha sido evaluado por nuestros expertos para asegurar la calidad y exactitud de nuestro contenido.

Ejemplo 1: voltear una imagen js

<divclass="f1_container"><divclass="shadow f1_card"><divclass="front face"><imgsrc="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg"style="height:281px;width:450px;"/>div><divclass="back face center"><imgsrc="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg"style="height:281px;width:450px;"/>div>div>div>

Ejemplo 2: voltear una imagen js

.f1_container 
    position: relative;
    margin:10px;
    width: 450px;
    height: 281px;
    z-index : 1;
    float:left;

.f1_container 
    -webkit-perspective: 1000;
    perspective: 1000;

.f1_card 
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;

.f1_container.active .f1_card 
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-shadow: -5px 5px 5px #aaa;

.face 
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

.face.back 
    display: block;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-sizing: border-box;
    color: white;
    text-align: center;
    background-color: #aaa;

Si te animas, puedes dejar un post acerca de qué le añadirías a este artículo.

---

---

Utiliza Nuestro Buscador