Question

我正在尝试使用three.js制作3D图片表，并且一切正常，但是，我只能将1张div背对背的两张图片：

在我的元素中，我有一个背景，我会在另一边有另一张照片。

有可能吗？使用属性backface-visibility:hidden;我可以使背景消失在错误的一侧，但如何将图片定义为“背面的背景”？

.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

你本身不能; backface-visibility: hidden;是这样的，您可以创建另一个元素，其背后的补充旋转包含您的背面。

Answer 2

背面需要第二个元素。有关如何实现此示例的示例，请参阅http://css3.bradshawenterprises.com/flip/（并将示例CSS3动画视为奖励）。

CSS：图片而不是backface-visibility = hidden

2 个答案: