爲什麼在我使用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）

回答

相關問題