Question

以下是测试链接：http://codepen.io/Gavin-YYC/pen/BpGOVd/。

HTML：

<div class="container">
  <button type="button" name="button" class="button">test</button>
  <div class="pic-wall">
    <img src="test.jpg" alt="" data-back-pic="koi.jpg">
    <img src="test.jpg" alt="" data-back-pic="koi.jpg">
    <img src="test.jpg" alt="" data-back-pic="koi.jpg">
    <img src="test.jpg" alt="" data-back-pic="koi.jpg">
    <img src="test.jpg" alt="" data-back-pic="koi.jpg">
    <img src="test.jpg" alt="" data-back-pic="koi.jpg">
    <img src="test.jpg" alt="" data-back-pic="koi.jpg">
    <img src="test.jpg" alt="" data-back-pic="koi.jpg">
    <img src="test.jpg" alt="" data-back-pic="koi.jpg">
  </div>
</div>

的CSS：

.pic-wall {
    perspective: 1400px;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}
.pic-wall .img-item {
    transform-style: preserve-3d;
}
.pic-wall .img-item img {
    backface-visibility: hidden;
}
.pic-wall .img-item img:nth-child(2) {
    transform: translateX(-50%) translateY(-50%) rotateY(-180deg);
}
.pic-wall .img-item.img-item-showback {
    transform: rotateY(180deg);
}

首次加载页面时，然后点击按钮＆＃39; test＆＃39;。

你会发现有一段时间空白。为什么呢？

我的代码中是否有错误？

Answer 1

建议将图像放在div元素中。

div.html('<div class="img-origin" ><img src="' + originPic + '"></div><div class="img-back"><img src="' + backPic + '"></div>');

然后修改

的css

.pic-wall .img-item div {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top : 0;
  left : 0;
}
.pic-wall .img-item div img{
  max-width : 100%;
}
.pic-wall .img-item .img-origin {

}
.pic-wall .img-item .img-back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.pic-wall .img-item.img-item-showback {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

通过一些css清理，最后它看起来像这样。

http://codepen.io/anon/pen/apQXZv?editors=0100

Answer 2

问题是因为你设置了backface-visibility: hidden css！

backface-visibility属性定义元素在不面向屏幕时是否应该可见。

当旋转元素并且您不希望看到它的背面时，此属性很有用。

只需删除它即可解决问题：

.pic-wall .img-item img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  /*backface-visibility: hidden;*/ /*remove this! */
}

<强> see this code pen

当我使用rotateY（180deg）时为什么会留空

2 个答案: