1

我在 Firefox 中出现了一种奇怪的行为。它仅将我的 css 3D 转换应用于链接中的绝对定位元素，但如果未包含在 a 标签中，则将转换应用于所有元素。

http://jsfiddle.net/jhpdf/aUS3P/

<ul class="list">
    <li>
        <div class="l35">
            <a href="http://www.youtube.com/luckypdftv" target="_blank">
                <img class="drop" src="http://luckypdf.com/new/youtubew-t blur.png" />
                <img class="front" src="http://luckypdf.com/new/youtubew-t.png" />
            </a>
       </div>       
    </li>
    <li>
        <div class="l35">
            <img class="drop" src="http://luckypdf.com/new/dailymail blur.png" />
            <img class="front" src="http://luckypdf.com/new/dailymail.png" />   
        </div>      
    </li>
</ul>

和

    .list {
    perspective:1000px;
    -moz-perspective: 1000px;
    -webkit-perspective:1000px;
    text-align:center;
    height:200px;
    width:300px;
    margin: 50px auto;

}

.list li {
    display:inline-block;
    position: relative;
    transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
    z-index: 1;
user-drag: none;
    -moz-user-drag: none;
    -webkit-user-drag: none;
    -o-user-drag: none;
    -ms-user-drag: none;
user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
}


.list li div {
    margin: 5px;
    transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
}


.list a {
    height:300px;
}




.list li img {
display:block; 
margin:auto; 
max-width: 200px; 
max-height:100px; 

        transition:  2s;
    -webkit-transition:  2s;
    -moz-transition:  2s;
    -o-transition:  2s;
    -ms-transition:  2s;
}
.list img.front {   
    z-index: 0;
    transform: translateZ(-100px);
        -webkit-transform: translateZ(-100px);
        -moz-transform: translateZ(-100px);
        -o-transform: translateZ(-100px);
        -ms-transform: translateZ(-100px);
}

.list li:hover img.front {
    transform: translateZ(100px); 
        -moz-transform: translateZ(100px); 
        -webkit-transform: translateZ(100px);
    z-index: 3;
}

.list img.drop {

    position: absolute;
    opacity: 0.6;
    transform: translateZ(-120px);
    -webkit-transform: translateZ(-120px);
    -moz-transform: translateZ(-120px);
    -o-transform: translateZ(-120px);
    -ms-transform: translateZ(-120px);
    top: 0px;
    z-index: -1;

}

.list li:hover img.drop {
    transform: translateZ(50px); 
        -moz-transform: translateZ(50px); 
        -webkit-transform: translateZ(50px);

}

在野生动物园中很好，很高兴知道为什么会这样。抱歉，代码有点乱。

4

0 回答 0