css3 - Y軸旋轉(zhuǎn)導(dǎo)致字體和圖片模糊
問題描述
先說下背景,我寫了個(gè)效果,菜鳥純瞎寫的,兩個(gè)p 假設(shè)AB吧,A顯示 B隱藏,點(diǎn)擊A后AY軸旋轉(zhuǎn)90deg隱藏緊接著B顯示然后旋轉(zhuǎn)90deg,做成了一個(gè)p翻轉(zhuǎn)正反面的假象,問題來了, 我點(diǎn)擊A的時(shí)候,p里面的字體 圖片變模糊了,到B出現(xiàn)的時(shí)候 B也模糊了,在Firefox上面 效果加載完后 它又自動(dòng)變回原來的清楚,不模糊了。但是再chrome上 動(dòng)畫結(jié)束后還是一直模糊。我想問問怎么解決,不想讓它點(diǎn)擊出現(xiàn)模糊了,更不想在谷歌上一直模糊 ,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);});
問題解答
回答1:css,js代碼都貼了,怎么不就不貼html代碼。這個(gè)問題你可以在要旋轉(zhuǎn)的標(biāo)簽上加上如下屬性。
backface-visibility: hidden;transform: translateZ(0)
具體可以參考:Stackflow
相關(guān)文章:
1. javascript - 最近用echarts做統(tǒng)計(jì)圖時(shí)遇到兩個(gè)問題!!2. 淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑3. node.js - less-loader 使用Mixins出錯(cuò)4. 利用IPMI遠(yuǎn)程安裝centos報(bào)錯(cuò)!5. android - TextInputLayout的空白顯示問題6. 為什么redis中incr一個(gè)“0” 會(huì)報(bào)錯(cuò)?7. celery+redis 怎么看redis里面的內(nèi)容8. android - 使用百度sdk調(diào)用SDKInitializer.initialize(this)時(shí)報(bào)錯(cuò)?9. android - 使用MTP連接的時(shí)候如何使自己的app加入選擇列表10. android - 優(yōu)酷的安卓及蘋果app還在使用flash技術(shù)嗎?

網(wǎng)公網(wǎng)安備