javascript - 为什么我用rotateY(180deg)时有时间空白

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);
}

首次加载页面时，单击“测试”按钮。

你会发现有一阵空白。为什么？

我的代码有什么错误吗？

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