CSS3 div 中的 3D 变换不显示

Question

我按照本教程在 3D 中进行了一些转换。

在这里你可以找到一个小提琴。

为什么只显示红色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

有一个属性是你没有设置的，这是必需的：转换样式：保留-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;
}

背面可见性：隐藏使元素在反转时不可见。

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

这就是为什么绿色元素不显示，但红色元素一直显示（它不应该！

小提琴

Answer 2

您隐藏了用于显示绿色div backface-visibility: visible; backface-visibility: hidden;，您必须将其定义为可见。

小提琴 ： http://jsfiddle.net/HarishBoke/nu69Y/

希望对您有所帮助！