css - 过渡到元素背面的奇怪行为(Chrome)

Question

我不知道该给这个问题定什么标题。

我有一些关于 3d 变换和背面可见性的实验:隐藏。

我试图将一个元素背面设置为可见，但覆盖了一个伪元素本身，这个背面可见性:隐藏:

这是 CSS:

.test { 
    width: 100px;
    height: 100px;
    position: relative;
    left: 30px;
    top: 30px;
    background-color: lightgreen;
    transition: all 2s linear;
    -webkit-transform-style: preserve-3d;
}

.test:after {
    content: '';
    right: 0px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to right, black, transparent);
    -webkit-transform: rotateY( 180deg );
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}


.container:hover .test {
  -webkit-transform: rotateY( 180deg );
}

fiddle

元素旋转，在过渡期间，您可以通过背面 mask 看到向后的 TEST 字母。然后，效果消失。

谁能解释一下这里发生了什么？

编辑:

一直不清楚自己想要什么，得到什么，不明白什么。

我试图让伪元素充当元素背面的一层。这就是为什么:

1. 该元素的背面可见。
2. 伪元素隐藏了背面
3. 伪元素有一些 alpha。

因此，当您看到正面时，您只会看到元素，正常。 当你看到背面时，你会看到元素(当然是颠倒的)颜色被伪元素改变了。 (这是可见的，因为那是它的正面)

现在，我预计它会成功或失败，但我没有预料到(也无法理解)为什么它在期间 过渡期间有效并在过渡结束时停止工作。而且，什么属性正在这里转移？

Answer 1

想象一下，两张纸的一面印有文字。您将它们放在一起，文字面彼此相对。现在旋转它们:你没有看到任何文字，是吗？ :)

.test:after 在 .test 之上并面向它 (rotateY( 180deg ))。由于背面是隐藏的，因此您看不到 .test:after。当.test旋转时，.test:after也随之旋转，就像两个页面一样。所以只要 .test 的背面没有被隐藏，你就不会看到 .test:after。

您注意到的闪烁是某种渲染问题。