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";
You can't, per se; backface-visibility: hidden;
is so that you can create another element with the supplementary rotation behind it that contains your backface.
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.