对变换元素内部的不透明度过渡产生负面影响

Question

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

http://jsfiddle.net/6p8jf3d3/

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将停止转换的跳跃/抖动效果，但它会保持堆栈模糊。这更好，但并不完美：

示例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;
}