先说下背景,我写了个效果,菜鸟纯瞎写的,两个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: 532px\9;
top: 330px\9;
}
#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代码。这个问题你可以在要旋转的标签上加上如下属性。
具体可以参考:Stackflow