Question

请试试这个。我改变了一个元素的不透明度，这会影响另一个包含文本的静态元素的外观。这很难解释，只是试着告诉我如何避免这种影响。在我看来，只有在使用变换链时才会发生这种情况。

HTML：

<div class="outer"> <div class="inner"></div> <div class="text">Hello</div> </div>

CSS：

div.outer {
    position: absolute;
    top: 100px;
    left: 50px;
    width: 200px;
    height: 100px;
    border: 1px solid black;

        -ms-transform: skew(-45deg);
    -webkit-transform: skew(-45deg);
            transform: skew(-45deg);
}

div.inner {
    width: 100%;
    height: 100%;
    background-color: #99CCFF;
    opacity: 0;

    -webkit-transition: all 0.5s;
            transition: all 0.5s;
}

div.text {
    position: absolute;
    top: 0;
    left: 0;  
    font-size: 2em;
    font-weight: bold;

        -ms-transform: skew(45deg);
    -webkit-transform: skew(45deg);
            transform: skew(45deg);
}

div.outer:hover div.inner {
    opacity: 1;
}

Answer 1

将transform: translateZ(0);添加到div.inner将停止转换的跳跃/震动效果，但它会使堆栈模糊不清。它更好，但并不完美：

<强> Example Fiddle

Answer 2

所以，我进行了一些实验（不是用这个jsfiddle，而是用更大的例子），并找到了Chrome，Safari，Opera和Firefox的解决方案。结合translateZ，背面可见性和变换风格。 jsfiddle.net/6p8jf3d3/4

CSS：

div.outer {
    position: absolute;
    top: 100px;
    left: 50px;
    width: 200px;
    height: 100px;
    border: 1px solid black;

        -ms-transform: skew(-45deg);
    -webkit-transform: skew(-45deg);
            transform: skew(-45deg);

    -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
}

div.inner {
    width: 100%;
    height: 100%;
    background-color: #99CCFF;
    opacity: 0;

    -webkit-transition: all 0.5s;
            transition: all 0.5s;

        -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

div.text {
    position: absolute;
    top: 0;
    left: 0;  
    font-size: 2em;
    font-weight: bold;

        -ms-transform: skew(45deg);
    -webkit-transform: skew(45deg);
            transform: skew(45deg);

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;   
}

div.outer:hover div.inner {
    opacity: 1;
}

对变形元素内部不透明度转变的负面影响

2 个答案: