0

我不知道为这个问题设置什么标题。

我对 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 );
}

小提琴

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

任何人都可以解释这里发生了什么？

编辑：

我一直不清楚我想要什么，我得到什么，以及我不明白什么。

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

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

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

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

4

1 回答 1

2

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

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

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

于 2013-07-08T19:38:30.723 回答