我在Firefox中遇到了一个奇怪的行为。它仅将我的css 3D变换应用于链接中的绝对定位元素,但如果未将其包含在标记中,则将变换应用于所有元素。
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);
}
在野生动物园中很好,很高兴知道为什么会这样。对不起,代码有点混乱。