Jquery 3d旋转上的CSS3卡仍在闪烁-i'；我尝试过背面可见性的解决方案：隐藏和转换，但没有成功

我有一个图片库，它是由宝丽来一样的图片组成的，这些图片被随机地“扔”到屏幕上，并进行不同的旋转和转换。当我将鼠标悬停在一个图像上时，它会缩放x2，它会以z索引出现在前面，并得到一个“0”的旋转。 现在问题来了：当你点击图片的右上角时，它会进行3d卡片翻转，背面有一个评论部分。但是，由于card div的背景色，该卡会严重闪烁，更糟糕的是，当单击“注释”部分时，它会在背景色后面“取消纸张”。这只发生在Chrome中。我尝试过不同的解决方案，包括translateZ（-1px）和改变不同div的背面可见性，但都不起作用。它只有在我移除卡片的背景色时才起作用，但是除了图像之外的所有东西都变得透明，这当然不是我想要的

这是小提琴：

翻转的CSS

.artGroup.flip {
    -webkit-perspective:800px;
    -moz-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
    perspective:800px;
}
.artGroup.flip .artwork {
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.artGroup.flip .detail, .artGroup.flip .theFlip {
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
}

.artGroup.flip img, .artGroup.flip .detail, .aaa, .bbb, .nota, .nrpoza{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

HTML

<div id="theArt">
    <div class="artGroup slide">
      <div class="artwork">
          <img class="mare" src="http://api.ning.com/files/SgY6-Aw-QoVTrUyj0n7j9R5MHqRWf5ECVRbqLx7BTEScSgnO-ClKrLdK72nGe8X8koNM70oYq2kVtHH0RbauTHTfLqkLnEWi/13365705hJ600x400.jpg?width=600&height=400"/>
            <div class="nota"><b>Some description here.</b></div>
            <div class="nrpoza">55</div>
            <div class="aaa" style="position:absolute; display:block; left:520px; top:20px; background: rgba(255, 255, 255, .3); border-radius:37px; padding:7px;"><img class="mica" src="http://i.i.cbsi.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg"/></div>

        <div class="detail">
            <div class="bbb" style="position:absolute; display:block; left:520px; top:20px; background: rgba(211, 211, 211, .3); border-radius:37px; padding:7px; width:60px;"><img class="mica" src="http://i.i.cbsi.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg" style="width:60px"/></div>

           Some comment section here!!!

        </div>
      </div>
    </div>
</div>

请帮我解决这个问题，因为我没有主意了。

---

提前谢谢。

小提琴会很有用的。嗨，米娜，我加了一把小提琴。抱歉，如果代码结构不太好，那么网页设计对我来说只是一种激情，所以我没有太多经验。与此同时，我在本地电脑上尝试添加一些div，并在flip上将背景色从透明变为白色。效果更好，但我还是有点不稳定。试试这个技巧。似乎在所有浏览器中都能正常工作。。并尽量不让样式保持内联（style=“”）

$(document).ready(function(){
        function NumarRandom(min, max) {
          return Math.floor(Math.random() * (max - min + 1) + min);
        }
        function NumarRandom(min, max) {
          return Math.floor(Math.random() * (max - min + 1) + min);
        }
        $('.artGroup').each(function(){
            $(this).css({ 
                '-webkit-transform':'rotate('+NumarRandom(-70,70)+'deg) scale(0.5)',
                '-moz-transform':'rotate('+NumarRandom(-70,70)+'deg) scale(0.5)',
                '-o-transform':'rotate('+NumarRandom(-70,70)+'deg) scale(0.5)',
                'transform':'rotate('+NumarRandom(-70,70)+'deg) scale(0.5)'
            });
            $(this).animate({'left':NumarRandom(000,100),'top':NumarRandom(0,100) });
            $(this).hover(
                function(){ $(this).css({'-webkit-transform':'rotate(0deg)', '-webkit-transform':'scale(1)'})},
                function(){ $(this).css({'-webkit-transform':'rotate('+NumarRandom(-80,80)+'deg) scale(0.5)'})}
            )
        });
    if ($('html').hasClass('csstransforms3d')) {    
            $('.artGroup').removeClass('slide').addClass('flip');

            $('.artGroup.flip .aaa').click(
                function () {
                    $(this).parent().addClass('theFlip');
                }
            );
            $('.artGroup.flip .bbb').click(
                function () {
                    $(this).parent().parent().removeClass('theFlip');

                }
            );
        } else {
            $('.artGroup').hover(
                function () {
                    $(this).find('.detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
                },
                function () {
                    $(this).find('.detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');            
                }
            );
        }
    });