为什么我使用rotateY（180度）时有时间空白答案

【问题标题】：Why is there a time blank when I used rotateY(180deg)为什么我使用rotateY（180度）时有时间空白
【发布时间】：2017-06-29 13:19:58
【问题描述】：

这里是测试链接：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);
}

第一次加载页面时，点击“测试”按钮。

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

我的代码有错误吗？

【问题讨论】：

在 chrome 中效果很好
img.youthol.top/squire.gif 这是我的情况。先加载页面，然后第一次点击“测试”按钮。我也在 chrome 56 中进行测试
img.youthol.top/QQ20170211-125221-HD.mp4

标签： javascript css animation transform

【解决方案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

【讨论】：

谢谢！我会听取你的建议。
当我检查 javascript 代码时，将添加一个 div，而不是每个原始图像，包括 2 个带有两张图片集的 img 元素。所以您的建议不适用于他的场景，请参阅我的回答

【解决方案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

【讨论】：

有效！非常感谢。我会仔细阅读手册的。