Question

I am trying to make 3D picture tables with three.js, and all is working fine, however, I would be able to have two pictures back-to-back with only 1 div :

in my element, I have a background, and I would have another picture on the other side.

Is it possible? With the property backface-visibility:hidden; I can make the background disappear on the wrong side, but how do define a picture as “background of the backface” ?

.element {
    width: 140px;
    height: 180px;
    box-shadow: 0px 0px 20px rgba(0,255,255,0.5);
    border: 1px solid rgba(127,255,255,0.25);
    cursor: default;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
}

...

var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundImage="url('img/img-"+(i+1)+".jpg')";
element.style.backgroundRepeat = "no-repeat";
element.style.backgroundPosition = "center";

Answer 1

You need a second element for the back face. See http://css3.bradshawenterprises.com/flip/ for an example on how to implement this (and consider the example CSS3 animation a bonus).