css3中的3D翻轉(zhuǎ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è)試是可以用的,但是這里放一起就出問題了,在IE下它翻轉(zhuǎn)180度后并沒有隱藏,這是為什么,哪位大神幫我看看,先謝過啦。
問題解答
回答1: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- 不支持
回答2:不知道你的 IE 目標(biāo)版本是多少,這是我以前寫給別人看的 Demo,在 IE 下應(yīng)該是沒問題的(不過我現(xiàn)在只有 windows 10 的 IE Edge,低版本我沒辦法測(cè)試)http://codepen.io/nightire/pen/azggOP
需要注意的是 vendor prefix 的事情,我這個(gè) Demo 里是有用 autoprefixer 的。
回答3:寫css3的屬性的時(shí)候,建議把前綴寫全了,支持的情況比較好。
-webkit-
-ms-
-moz-
相關(guān)文章:
1. python bottle跑起來以后,定時(shí)執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?2. javascript - ios返回不執(zhí)行js怎么解決?3. javascript - vue2如何獲取v-model變量名4. node.js - vue中 post數(shù)據(jù)遇到問題5. 前端 - 誰來解釋下這兩個(gè) CSS selector 區(qū)別6. javascript - 求幫助 , ATOM不顯示界面!!!!7. html5 - HTML代碼中的文字亂碼是怎么回事?8. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示9. mysql - 分庫(kù)分表、分區(qū)、讀寫分離 這些都是用在什么場(chǎng)景下 ,會(huì)帶來哪些效率或者其他方面的好處10. python - 爬蟲模擬登錄后,爬取csdn后臺(tái)文章列表遇到的問題
