efecto flip

[fersosa]

Hola gente. quisiera saber del efecto flip. o sea un cuadro (div) que tenga u contenido, y al pasar el mouse se de vuelta con otro contenido.
a su vez que regrese a su estado después de pasado el mouse.
y algo de transparencia mejor.

algo así.
http://www.lynda.com/?co=2



gracias!

[pzin]

Primer resultado en Google: http://davidwalsh.name/css-flip

[fersosa]

gracias!
lo tengo bien a los códigos, el problema era (y es) que estaba probando en el explorer y no funciona. ahora a ver como soluciono eso.

[fersosa]

solucioné lo de IE ahora sigue sin girar la imagen en chrome

[pzin]

Sin que publiques el código será difícil saber el porqué.

[fersosa]

Código HTML:

<div id="bloques">
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <img src="Images/muestra1.jpg"
            width="500px"
            height="246x"
            />
            
        </div>
        <div class="back">
            <a href="http://www.forosdelweb.com/f53/muestra1/index.htm"><img src="Images/muestra1atras.jpg"
            width="500px"
            height="246px"
            />
        </a></div>
    </div>
    
 
    
  </div>
</div>
 

y el css:

Código CSS:

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }
 
.flip-container, .front, .back {
    width: 153px;
    height: 154px;
}
 
/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
 
    position: relative;
}
 
/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: -159px;
    left: 3px;
}
 
/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}
 
/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
}
 
/* 
    Some vertical flip updates 
*/
.vertical.flip-container {
    position: relative;
}
 
    .vertical .back {
        transform: rotateX(180deg);
    }
 
    .vertical.flip-container:hover .back {
        transform: rotateX(0deg);
    }
 
    .vertical.flip-container:hover .front {
        transform: rotateX(180deg);
    }
 
 
 
 
 
 
/* bloque2 */
 
/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /*  UPDATED! flip the pane when hovered */
    .flip-container:hover .atras {
        transform: rotateY(0deg);
    }
    .flip-container:hover .frente {
        transform: rotateY(180deg);
    }
 
.flip-container, .frente, .atras {
    width: 153px;
    height: 154px;
}
 
/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
 
    position: relative;
}
 
/* hide back of pane during swap */
.frente, .atras {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 275px;
    left: 834px;
}
 
/*  UPDATED! front pane, placed above back */
.frente {
    z-index: 2;
    transform: rotateY(0deg);
}
 
/* back, initially hidden pane */
.atras {
    transform: rotateY(-180deg);
}
 
/* 
    Some vertical flip updates 
*/
.vertical.flip-container {
    position: relative;
}
 
    .vertical .atras {
        transform: rotateX(180deg);
    }
 
    .vertical.flip-container:hover .atras {
        transform: rotateX(0deg);
    }
 
    .vertical.flip-container:hover .frente {
        transform: rotateX(180deg);
    }
 

gracias!

[pzin]

¿Tienes puestos los prefijos propietarios?

Tal como pusiste el código (no digo sin usar la opción de highlight) parece que no sabes muy bien cómo funciona o qué es lo que hace. No estaría mal revisar eso para comprender el funcionamiento.