过渡到元素背面的奇怪行为(Chrome) [英] Strange behaviour in a transition to element backface (Chrome)

问题描述

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

I don't know exactly what title to set for this question.

我对 3d 变换和背面可见性进行了一些实验:隐藏.

I have some experiments with 3d transforms and backface visibility: hidden.

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

I was trying to set an element backface visible, but overlayed with a pseudo-element of itself, this one backface-visibility: hidden:

这是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 字母.然后，效果就消失了.

fiddle

The element rotates, and for the transition duration you can see the TEST letters backwards thru the backface masks. And then, the effect disappears.

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

Anyone can explain what is happening here ?

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

I haven't been clear about what I wanted and what I get, and what I don't understand.

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

I was trying to have the pseudo element to act as a layer on the backside of the element. That's why:

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

所以，当你看到正面时，你只能看到元素，正常.当你看到背面时，你会看到被伪元素改变了颜色的元素(当然是反转的).(这是可见的，因为那是它的正面)

So, when you are seeing the front, you see only the element, normal. When you see the back, you see the element (reversed, of course) with the color changed by the pseudo element. (that is visible because that is its front face)

现在，我预计这会成功或失败，但我没想到(也无法理解)为什么它在过渡期间起作用并在过渡结束时停止工作.而且，什么属性正在这里转换?

Now, I expected that to succeed or fail, bt I didn't expect (and can't understand) why it works during the transition and stops working at the end of the transition. And, also, what property is beeing transitioned here ?

推荐答案

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

Imagine two sheets of paper with text printed on one side. You put them together with the text sides facing each other. Now rotate them: You don't see any text, do you? :)

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

.test:after is above .test and facing it (rotateY( 180deg )). Since the backface is hidden you don't see .test:after. When .test is rotated .test:after is rotated with it, like the two pages. So as long as the backface of .test is not hidden, you won't see .test:after.

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

The flickering you notice is some kind of rendering issue.

这篇关于过渡到元素背面的奇怪行为(Chrome)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！