Question

我正在制作一个3D盒子，所以我需要大多数元素绝对定位。正面是img，此刻侧面是空div。第三个div是一个字幕div，在图像上的不透明度为0.我做了简单的悬停效果将此不透明度更改为1，它在FF中工作正常，但在Chrome中没有。

我已经看到在Chrome中对绝对定位元素使用hover时存在一些错误，但正如我所理解的那样，这些错误仅发生在z-index的元素上，也许我错了。无论如何，这是盒子代码，我真的可以使用一些帮助来解决这个问题，因为我无法确定Chrome存在的问题。

HTML：

<div class="image-wrap">
        <div class="image">
            <img src="img/unyield.jpg" class="image-front">
            <div class="image-caption">
                <span class="caption-content">Unyielding sense</span><br/>
                    <span class="caption-one">cover artwork</span><br/>
                    <span class="read-more">INFO</div>
            <div class="image-side"></div>
        </div>
    </div>

CSS BOX：

.image-wrap {
position: absolute;
top: 50%;
left: 5%;
margin-top: -225px;
width: 360px;
height: 550px;
perspective: 1000px;
-ms-perspective: 1000px;
-moz-perspective: 1000px;
-webkit-perspective: 1000px;
-o-perspective: 1000px;
}

.image {
position: absolute;
width: 360px;
height: 550px;
transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform: translateZ(-130px);
-ms-transform: translateZ(-130px);
-moz-transform: translateZ(-130px);
-webkit-transform: translateZ(-130px);
-o-transform: translateZ(-130px);
transition: all 1s ease;
-ms-transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
}


.image-front, .image-side {
position: absolute;
width: 360px;
height: 550px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.image-front {
transform: translateZ(180px);
-ms-transform: translateZ(180px);
-moz-transform: translateZ(180px);
-webkit-transform: translateZ(180px);
-o-transform: translateZ(180px);    
}


.image-side {
transform: rotateY(90deg) translateZ(180px);
-ms-transform: rotateY(90deg) translateZ(180px);
-moz-transform: rotateY(90deg) translateZ(180px);
-webkit-transform: rotateY(90deg) translateZ(180px);
-o-transform: rotateY(90deg) translateZ(180px);
border: 1px solid #B8B5B5;
background-color: green;
}

问题标题CSS：

.image-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
opacity: 0;
background-color: black;
color: white;
text-align: center;
padding-top: 25px;
transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.image:hover .image-caption{
opacity: 0.8;
}

Answer 1

这会导致问题px使用deg

.image-front {
transform: translateZ(180px);
-ms-transform: translateZ(180px);
-moz-transform: translateZ(180px);
-webkit-transform: translateZ(180px);
-o-transform: translateZ(180px);    
}

见 stackoverflow.com/questions/hardware-acceleration-in-css3 和css-performance-relative-to-translatez0

CSS悬停在Chrome中无效

1 个答案: