css3 - Y轴旋转导致字体和图片模糊

Question

先说下背景，我写了个效果，菜鸟纯瞎写的，两个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);
});

Answer 1

The css and js codes have been posted, why not just post the html code? For this problem, you can add the following attributes to the label to be rotated.

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

For details, please refer to: Stackflow