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);});
问题解答
回答1:css,js代码都贴了,怎么不就不贴html代码。这个问题你可以在要旋转的标签上加上如下属性。
backface-visibility: hidden;transform: translateZ(0)
具体可以参考:Stackflow
相关文章:
1. javascript - 引入 simditor,但是显示标签,这个怎么解决。2. android - 目前有哪些用Vue.js开发移动App的方案?3. docker api 开发的端口怎么获取?4. Android PopupWindow 问题。5. cas项目起个名字6. background属性顺序?7. angular.js - angular route如何实现单页面切换时数据的传递8. angular.js - angular有没有可以本地构建静态代码的工具9. python - scrapy获取网页指定内容,后翻到下一页继续,固定循环次数。。问题10. 中文phpword文档