[英]CSS : picture instead of backface-visibility = hidden
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 : 我正在尝试使用three.js制作3D图片表,并且一切正常,但是,我将能够仅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;
具有属性
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).
有关如何实现此操作的示例,请参见http://css3.bradshawenterprises.com/flip/ (并考虑将示例CSS3动画作为奖励)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.