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

元素旋转，对于过渡持续时间，您可以通过背面蒙版向后看到TEST字母。然后，效果消失了。

任何人都可以解释这里发生的事情吗？

编辑：

我还没清楚我想要什么，得到什么，以及我不理解的东西。

我试图让伪元素充当元素背面的一层。这就是原因：

元素背面可见。
伪元素背面隐藏
伪元素有一些alpha。

所以，当你看到前面时，你只能看到正常的元素。当您看到背面时，您会看到伪元素更改颜色的元素（当然是反转的）。（这是可见的，因为那是它的正面）

现在，我预计会成功或失败，但我没想到（并且无法理解）为什么它在过渡期间工作并且在结束时停止工作过渡。而且，什么属性正在转变？

Answer 1

想象一下两张纸，一面印有文字。你把它们放在一起，文字两边面对面。现在旋转它们：你没有看到任何文字，是吗？：）

.test:after高于.test且面对它（rotateY( 180deg )）。由于隐藏了背面，因此您看不到.test:after。旋转.test时.test:after随之旋转，就像两页一样。因此，只要.test的背面未被隐藏，您就不会看到.test:after。

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

过渡到元素背面的奇怪行为（Chrome）

fiddle

1 个答案: