Question

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

单击时也会产生过渡效果。它在Chrome和IE10以及移动Safari 7上都非常完美。但是，它在Firefox和桌面Safari上几乎没有问题。

在Firefox（最新版本29.0.1）上，单击图像不会将其置于零位（平面视图）。此外，您无法点击下面的图层。假设当第一张图像是当前图像时，您无法直接点击第三张图像，除非您单击第二张图像并使其成为当前图像。
在桌面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;
}

Jquery的

$('.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之外的其他内容，也许使用一个类来明确识别当前的＆＃39; item，而不是依赖于z-indexing的浏览器实现

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

1 个答案: