简体   繁体   English

CSS:图片而不是背面可见性=隐藏

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM