jquery - CSS 透视图和 translateZ 在 FF 和 Safari 中无法正常工作

Question

我使用 css3 透视图和 translateZ 创建了一个封面流， DEMO HERE

点击通过时也有过渡效果。它在 Chrome 和 IE10 以及移动版 Safari 7 上完美运行。但是，它在 Firefox 和 Desktop Safari 上几乎没有问题。

1. 在 Firefox(最新的 29.0.1)上，点击图像不会将其放回零位置(平面 View )。你也不能点击下面的层。比如当第一张图片是当前图片时，您不能直接点击第三张图片，除非您点击第二张图片并将其设为当前第一张。
2. 在桌面 Safari 上(5，在 PC 和 MAC 上)，过渡部分有效，不流畅但可以接受。主要问题是无论您点击什么图片，它都会立即触发下载，而代码应该只有在图片是当前图片时才会下载。

结构很简单:HTML

<div class="product-download">
    <div id="product-image">
        <img src="//placehold.it/360x259" /> <span class="download-title">Product Image</span>

    </div>
    <div id="in-situ-image">
        <img src="//placehold.it/360x259" /> <span class="download-title">In-Situ Image</span>

    </div>
    <div id="product-flyer">
        <img src="//placehold.it/360x259" /> <span class="download-title">Product Flyer</span>

    </div>
    <div id="data-sheet">
        <img src="//placehold.it/360x259" /> <span class="download-title">Data Sheet</span>

    </div>
</div>

CSS

body {
    width:100%;
}
.product-download {
    position:relative;
    width:900px !important;
    height:397px;
    margin: 0 auto;
    transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -ms-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -moz-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -webkit-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    cursor:pointer;
    margin-top:50px;
    margin-left:30px;
}
.product-download > div {
    width:360px;
    height:289px;
    position:absolute;
    display:inline-block;
    transition: all 1s;
}
#product-image {
    z-index:9999;
    transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -ms-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -moz-transform: perspective(0px) rotateY(0deg) translateZ(0px);
    -webkit-transform: perspective(0px) rotateY(0deg) translateZ(0px);
}
#in-situ-image {
    transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -ms-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -moz-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:5;
    left:150px;
}
#product-flyer {
    transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -ms-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -moz-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:4;
    left:330px;
}
#data-sheet {
    transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -ms-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -moz-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(-100px);
    z-index:3;
    left:510px;
}
.download-title {
    width:300px;
    height:30px;
    font: italic bold 18px/30px Helvetica, serif;
    position:absolute;
    text-align:center;
    display:none;
}
#product-image >span {
    display:block;
}

查询

$('.product-download div').click(function () {
    $(this).fadeTo('slow').css({
        'transform': 'perspective( 0px ) rotateY( 0deg ) translateZ(0px)',
            '-ms-transform': 'perspective( 0px ) rotateY( 0deg ) translateZ(0px)',
            '-webkit-transform': 'perspective( 0px ) rotateY( 0deg ) translateZ(0px)'
    }).css('z-index', '9999');
    $(this).prevAll().fadeTo('slow').css({
        'transform': 'perspective( 600px ) rotateY( 30deg ) translateZ(-100px)',
            '-ms-transform': 'perspective( 600px ) rotateY( 30deg ) translateZ(-100px)',
            '-webkit-transform': 'perspective( 600px ) rotateY( 30deg ) translateZ(-100px)'
    }).css('z-index', '1');

    $(this).nextAll().each(function (index) {
        $(this).fadeTo('slow').css({
            'transform': 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)',
                '-ms-transform': 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)',
                '-webkit-transform': 'perspective( 600px ) rotateY( -30deg ) translateZ(-100px)'
        }).css('z-index', '-' + index);

    });
    $('.download-title').css('display', 'none');
    $(this).children('span').eq(0).css('display', 'block');
    event.preventDefault();

    if ($(this).css('z-index') == 9999) {
        event.preventDefault();
        window.open('//placehold.it/200x200&text=DOWNLOAD', '_blank');
    }
});

Answer 1

您立即应用 z-index: 9999，这就是为什么它始终测试为真并触发下载(尽管尚不清楚为什么这会因浏览器而异)。

你可以:

• 将 z-index 声明移动到 fadeTo 函数中
• 在转换之前移动 if 测试(这可能是最简单的方法)
• 测试 z-index 以外的东西，也许使用一个类来明确标识“当前”元素，而不是依赖于 z-indexing 的浏览器实现