Question

我有一个图片库，由类似宝丽来的图片组成，这些图片随机“抛出”在屏幕上，不同的旋转并翻译每个。当我将鼠标悬停在图像上时，它会缩放x2，它会以z-index结束并获得“0”的旋转。现在出现问题：当你点击图片的右上角时，它会翻转3d卡片，而背面则会有一个评论部分。然而，由于卡片div的背景颜色，卡片严重闪烁，更糟糕的是，当点击评论部分时，它会在背景颜色后面“消失”。这只发生在Chrome中。我尝试了不同的解决方案，使用translateZ（-1px）和改变不同div的背面可见性，但它不起作用。它只有在我删除卡片的背景颜色时才有效，但除了图像之外的所有内容都变得透明，这当然不是我想要的。

这是小提琴：http://jsfiddle.net/4Tw3s/1/

翻页的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>

和Jquery

$(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');            
                }
            );
        }
    });

请帮我解决这个问题，因为我没有想法。提前谢谢。

3D旋转的CSS3卡仍然闪烁 - 我已经尝试了具有背面可视性的解决方案：隐藏和translateZ没有成功

0 个答案: