Reputation: 6296
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);
}
Upvotes: 2
Views: 152
Reputation: 64264
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 !)
Upvotes: 1
Reputation: 557
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!
Upvotes: 1