为什么在我使用rotateY时出现空白（180deg）

以下是测试链接：http://codepen.io/Gavin-YYC/pen/BpGOVd/。为什么在我使用rotateY时出现空白（180deg）

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

当第一次加载页面，然后点击按钮 '测试'。

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

我的代码中是否存在一些错误？

来源

2017-02-11 Gavin Yang

铬 –

http://img.youthol.top/squire.gif的伟大工程，这里是我的情况。首先加载页面，然后只是第一次点击'测试'按钮。我也在chrome中测试56 –

http://img.youthol.top/QQ20170211-125221-HD.mp4 –

建议将图像放置在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

来源

2017-02-11 09:32:01 Diode

谢谢！我会接受你的建议。 –

当我检查javascript代码，而不是每个原始图像，一个'div'将被添加包括2个img元素与两个图片集..所以你的推荐不适用于他的场景，请参阅我的回答 –

问题是因为backface-visibility: hidden CSS设置！

背面可见性属性定义当不面向屏幕时元素是否应该可见。

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

只是删除它来解决这个问题：

.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

来源

2017-02-11 12:31:33

它的工作原理！非常感谢你。我会仔细阅读手册。 –

为什么在我使用rotateY时出现空白（180deg）

回答

相关问题