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

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

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

希望它可以帮到你！

Answer 2

有一个你没有设置的属性，这是必需的：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，那只适用于对元素本身的转换。

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

CSS3 div中的转换3D没有显示出来

2 个答案:

fiddle