背面可見性在Firefox中無法正常工作（適用於Safari）

我遇到背面可見性屬性問題。它在Safari/Chrome中的工作原理是這樣，但由於某些原因，它在Firefox中無法正常工作。背面可見性在Firefox中無法正常工作（適用於Safari）

當箱翻轉，我得到了正面的鏡像：

2012-03-07 realph

我在Firefox 10.0.2中遇到了完全相同的問題！看起來這個屬性只適用於正面，但是當它旋轉180度時，背面不再適用。任何人都有解決這個問題的辦法？！ – Mark 2012-03-12 05:53:26

嘗試把「背面能見度：隱藏」兩個對象及其容器。這是什麼對我來說這個bug

2014-07-01 18:54:38 yalia

這個問題在Firefox中一直修復到v30。最新版本的v31出現了同樣的問題。給出的解決方案也適用於我。謝謝。 – Ninz 2014-07-31 03:36:15

不幸的是，在容器中添加「backface-visiblity：hidden」會導致後退在Chrome中無響應。 – 2015-09-03 10:57:31

我與iPhone 6 Safari有同樣的問題。在大多數情況下，我沒有看到任何理由不將「背面 - 可見性：隱藏」應用於身體，用於級聯所有元素（除了需要的地方）。 – Sablefoste 2015-09-23 14:44:41

修復方法是將transform: rotateX(0deg)添加到正面和背面物體。

正如@yalia所建議，在容器上添加backface-visiblity:hidden後，Chrome在後臺無響應，因此應該避免修復。

這是修復的fiddle。

2015-09-06 08:52:17

使用'transform：rotateX（0deg）'修復我在Safari上遇到的同樣的錯誤 – mems 2016-01-15 12:28:48

不錯的變換：rotateX（0deg）像魅力一樣工作<3 – 2017-04-26 20:39:02

我有不同的行爲。向兩個面添加transform：rotateX（0deg）隱藏後面，但將它添加到前面對我來說工作得很好。 – AyexeM 2017-11-29 21:25:10

回答