元素旋轉和變換樣式導致的顯示不一致：preserve-3d

我今天做了一些實驗，發現問題歸結爲transform: rotateY(180deg)和容器旋轉transform-style: preserve-3d。我會再次描述細節。原來的問題是低於你可以簡單地忽略它。元素旋轉和變換樣式導致的顯示不一致：preserve-3d

這一次，我將啓用transform-style: preserve-3d;在section從一開始可以消除一些不相關的細節。

代碼：

section { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 300px; 
 
    transform-style: preserve-3d; 
 
    /*adjust deg here*/ 
 
    transform: rotateY(0deg); 
 
} 
 
img,div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
div { 
 
    width: 267px; 
 
    height: 300px; 
 
    transform: rotateY(180deg); 
 
    background: rgba(10, 10, 10, 0.6); 
 
}

<section> 
 
    <img src="http://www.weekends.net.cn/assets/img/blur.jpg"> 
 
    <div id="back">abc</div> 
 
</section>

請增加部分標籤的旋轉度高達180deg。然後div將消失。不要停止並繼續增加，div會交替出現和消失，這會導致不一致和不可預測性。更糟糕的是，div的寬度會影響這種「不一致性」。例如，將rotateY（）的參數設置爲180deg後，將div的寬度減少1像素，然後將出現div！這是我發現的問題。這是瀏覽器的錯誤嗎？我在Mac上使用Chrome進行了測試。

原始問題： 我正在閱讀與此問題有關的CSS第8章：權威指南第4版。

我想做什麼：頁面上有一個部分標籤，其中包含一個div和一個img標籤。 img代表正面，而div代表背面。當卡朝前時，用戶只能看到img。當卡片朝後（通過懸停）時，用戶通過div的透明背景可以看到div和img的背面。

我的代碼是：

section { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 300px; 
 
} 
 

 
img, 
 
div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
div { 
 
    width: 200px; 
 
    height: 300px; 
 
    transform: rotateY(180deg); 
 
    backface-visibility: hidden; 
 
    background: rgba(255, 255, 255, 0.6); 
 
} 
 

 
section:hover { 
 
    transform: rotateY(180deg); 
 
    transform-style: preserve-3d; 
 
}

<section> 
 
    <img src="http://www.weekends.net.cn/assets/img/blur.jpg"> 
 
    <div id="back">abc</div> 
 
</section>

正如你所看到的，div如果你將鼠標懸停在其上僅僅覆蓋img的一部分。如果我將div的寬度增加到267px，那麼div將'消失'。事實上，經過一些實驗後，div將在寬度達到section寬度的2/3後消失。我認爲這個問題可能與旋轉有關，但我無法弄清楚。請幫幫我。謝謝！

來源

2017-02-15 krave

我已經將您的代碼片段。然而，它似乎工作得很好，我也增加了寬度，但我看不到任何問題 – vals

@vals切換「節」的懸停和增加「div」的寬度超過267px，那麼你應該能夠看到問題。我在Mac上用Chrome 56.0.2924.87（64位）和safari測試了這一點。隨着盤旋，'div'消失。 – krave

爲了在「轉向前方」時保持背面可見，兩個元素（img和div＃back）都需要有backface-visibility: hidden。但這不適用於任何透明度。

然而，我們可以通過向背面添加一個帶有僞元素的翻轉背景來作弊。

https://jsfiddle.net/oynpktxd/

div:before { 
    background-image: url("http://www.weekends.net.cn/assets/img/blur.jpg"); 
    content: ""; 
    display: block; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    transform: rotateY(180deg); 
    z-index: -1; 
    opacity: 0.4; 
}

來源

2017-02-15 08:29:12

我仍然無法看到在我的測試問題。但是你描述的問題可能是一個z戰鬥問題。 z-fight explained。如果是這樣的話，你可以解決它把DIV略在部分前面：

section { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 300px; 
 
    transform-style: preserve-3d; 
 
    transform: rotateY(0deg); 
 
    transition: transform 5s; 
 
} 
 
img,div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
div { 
 
    width: 267px; 
 
    height: 300px; 
 
    transform: rotateY(180deg) translateZ(1px); /* added the z translation */ 
 
    background: rgba(10, 10, 10, 0.6); 
 
} 
 

 
section:hover { 
 
    transform: rotateY(180deg); 
 
}

<section> 
 
    <img src="http://www.weekends.net.cn/assets/img/blur.jpg"> 
 
    <div id="back">abc</div> 
 
</section>

來源

2017-02-18 07:59:50 vals

元素旋轉和變換樣式導致的顯示不一致：preserve-3d

回答

相關問題