Creating a div based flipper. The front and back are currently coded as colours but the back will eventually be a background-image.
I've followed this guide here: http://davidwalsh.name/css-flip which doesn't work yet works in the demo. I've presumably done something wrong.
Heres the
HTML:
<div class="flip-container">
<div class="flipper">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
</div>
CSS:
.flip-container {
perspective:1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
height:480px;width:320px;
}
.flipper {
position:relative;
}
.front {
background:#99CCFF;
z-index:2;
}
.back {
background:#CCC;
transform:rotateY(180deg);
}
.front, .back {
backface-visibility:hidden;
position:absolute;top:0;left:0;
}
and a lovely jsfiddle:
What browser did you use? If you use Chrome v35, you need to add prefix to transform property.
Demo