Transformations 3D in CSS3 div doesn't shows up

Question

I have followed this tutorial to make some transformations in 3D.

Here you can find a Fiddle.

Why is only the red div getting displayed, but the green div not?

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

There is a property that you didn't set, and that is needed: 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 makes the element not visible when it is reversed.

But, if you don't set the preserve-3d, that works only with the transforms to the element itself.

That's why the green element doesn't show, but the red one keeps shown (it shouldn't !)

fiddle

Answer 2

You have hidden backface-visibility: hidden; for showing green div backface-visibility: visible; you have to define it to visible.

Fiddle : http://jsfiddle.net/HarishBoke/nu69Y/

Hope it helps you!