問(wèn)題描述

<p class='container'> <p class='side'><p class='front'> <!-- 正面 --></p><p class='back'> <!-- 反面 --></p></p>

.container { perspective: 1000; }.container:hover .side{ transform: rotateY(180deg);}.container, .front, .back { width: 320px; height: 480px;}.side { transition: 0.6s; transform-style: preserve-3d; /*讓其子元素有3D翻轉(zhuǎn)的效果。*/ position: relative;}.front, .back { backface-visibility: hidden; /*將反轉(zhuǎn)了180度的隱藏*/ -ms-backface-visibility: hidden; position: absolute;}.front { background-color: red;}.back { transform: rotateY(180deg); background-color: blue;}

比較郁悶的是，在其他瀏覽器都能正常顯示效果，但是IE不行，backface-visibility: hidden;這句單獨(dú)在IE下測(cè)試是可以用的，但是這里放一起就出問(wèn)題了，在IE下它翻轉(zhuǎn)180度后并沒(méi)有隱藏，這是為什么，哪位大神幫我看看，先謝過(guò)啦。

問(wèn)題解答

http://caniuse.com/#search=backface-visibilityPartial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

ie edge支持ie11 ie10 Partial supportie9- 不支持

不知道你的 IE 目標(biāo)版本是多少，這是我以前寫(xiě)給別人看的 Demo，在 IE 下應(yīng)該是沒(méi)問(wèn)題的（不過(guò)我現(xiàn)在只有 windows 10 的 IE Edge，低版本我沒(méi)辦法測(cè)試）http://codepen.io/nightire/pen/azggOP

需要注意的是 vendor prefix 的事情，我這個(gè) Demo 里是有用 autoprefixer 的。

寫(xiě)css3的屬性的時(shí)候，建議把前綴寫(xiě)全了，支持的情況比較好。

－webkit－

－ms－

－moz－