css3 - Y軸旋轉導致字體和圖片模糊

問題描述

先說下背景，我寫了個效果，菜鳥純瞎寫的，兩個p 假設AB吧，A顯示 B隱藏，點擊A后AY軸旋轉90deg隱藏緊接著B顯示然后旋轉90deg，做成了一個p翻轉正反面的假象，問題來了， 我點擊A的時候，p里面的字體 圖片變模糊了，到B出現的時候 B也模糊了，在Firefox上面 效果加載完后 它又自動變回原來的清楚，不模糊了。但是再chrome上 動畫結束后還是一直模糊。我想問問怎么解決，不想讓它點擊出現模糊了，更不想在谷歌上一直模糊 ，html我就不貼了，下面是css js的代碼；效果可以上www.maiya.com看一下，求大腿，么么噠~

css代碼：

#point{ width: 250px; height: 250px; border: 30px solid #2D5593; left: 593px; top: 122px; left: 532px9; top: 330px9;}#point2{ width: 100%; height: 100%; /*margin: 25px;*/ -webkit-box-shadow: inset 0 0 15px 15px #CCCCCC; -moz-box-shadow: inset 0 0 15px 15px #CCCCCC; box-shadow: inset 0 0 15px 15px #CCCCCC;}#point2f{ width: 100%; height: 100%; -webkit-box-shadow: inset 0 0 15px 15px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 0 15px 15px rgba(0,0,0,0.2); box-shadow: inset 0 0 15px 15px rgba(0,0,0,0.2); display: none; -webkit-transform: rotate3d(1,1,0,90deg); -moz-transform: rotate3d(1,1,0,90deg); -ms-transform: rotate3d(1,1,0,90deg); -o-transform: rotate3d(1,1,0,90deg); transform: rotate3d(1,1,0,90deg);}#point3{ width: 280px; height: 280px; text-align: center;}js代碼：$('#point2').click(function () {$(this).css({ ’transition’: ’0.5s’, ’transform’: ’rotate3d(1,1,0,90deg)’,}).fadeOut(500);setTimeout(function () { $('#point2f').css({’transition’: ’0.5s’,’transform’: ’rotate3d(1,1,0,-90deg)’, }).fadeIn(500).css({’transition’: ’0.5s’,’transform’: ’rotate3d(1,1,0,0deg)’, }); }, 500);});$('#point2f').click(function () {$(this).css({ ’transition’: ’0.5s’, ’transform’: ’rotate3d(1,1,0,90deg)’,}).fadeOut(500);setTimeout(function () { $('#point2').css({’transition’: ’0.5s’,’transform’: ’rotate3d(1,1,0,-90deg)’, }).fadeIn(500).css({’transition’: ’0.5s’,’transform’: ’rotate3d(1,1,0,0deg)’, });}, 500);});

問題解答

css,js代碼都貼了，怎么不就不貼html代碼。這個問題你可以在要旋轉的標簽上加上如下屬性。

backface-visibility: hidden;transform: translateZ(0)

具體可以參考：Stackflow