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: 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);
});