html - CSS3 div 中的 Transformations 3D 不显示

Question

我已经关注了这个 tutorial在 3D 中进行一些转换。

在这里你可以找到一个 Fiddle .

为什么只显示红色的div，而没有显示绿色的div？

HTML:

<div id="scene3D">
  <div id="flip">
    <div>Red Text</div>
    <div>Green Text</div>
  </div>
</div>

CSS:

#scene3D{
  width:300px;
  height:300px;
  margin: auto;
  -webkit-perspective:500px;   
  perspective:500px;   
}
#flip{
  width:300px;
  height:300px;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
  transition:all 1s ease;
}
#scene3D:hover #flip{

  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
#flip div{
  position:absolute;
  width:300px;
  height:300px;
  background:red;     
  -webkit-backface-visibility: hidden;     
  backface-visibility: hidden;   
}
#flip div:last-child{
  background:green;
  -webkit-transform: rotateX(180deg); 
  transform: rotateX(180deg); 
}

Answer 1

有一个属性您没有设置，但它是必需的:transform-style: preserve-3d。

#flip{
    width:300px;
    height:300px;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    transition:all 1s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

backface-visibility: hidden 使元素在反转时不可见。

但是，如果您不设置 preserve-3d，则它仅适用于对元素本身的转换。

这就是为什么绿色元素不显示，但红色元素一直显示的原因(不应该!)

fiddle