How can I hide the backface of a block element rotated with transform: rotateX()?

Question

Per this example: http://jsbin.com/zuyena/4/edit, I've got two elements, one after the other inside a container:

<div class="container">
  <div class="box box1">... text ...</div>
  <div class="box box2">... text ...</div>
</div>

With the help of CSS transitions/animations, I'd like to animate the box2 to appear as though it's flapping down from underneath of box1. Omitting the actual transition, I'm pretty close with:

.container {
  -webkit-perspective: 300px;
  -webkit-perspective-origin: 50% 0%;
}

.box2 {
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotateX(-80deg);
  -webkit-backface-visibility: hidden;  /* Doesn't this hide the back face? */
}

However, as you can see in this example, the back face of box2 is visible behind box1, despite -webkit-backface-visibility: hidden;. How can I prevent this?

P.S. I am only using -webkit prefixes to keep the example simple.

Please check if [this](http://stackoverflow.com/questions/7455502/webkit-backface-visibility-not-working) helps. — Harry, Jul 20 '14 at 06:21

score 2 · Accepted Answer · answered Jul 20 '14 at 06:21

2

It's because you are using perspective!
until -90deg it doesn't have any back-face to hiding!
try to set -91deg, and see your back-face will hiding.

.box2 {
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotateX(-91deg); /*now it will work*/
  -webkit-backface-visibility: hidden;
}

answered Jul 20 '14 at 06:21

MeTe-30

2,512
2
21
30

You speak the truth. Thanks for pointing this out. So the question, then, becomes this: how can I get the desired effect? I want to keep the perspective, but I also do want the back face to be invisible when it's behind the top box. Any ideas? Skew? – Dmitry Minkovsky Jul 20 '14 at 06:38
@dimadima: How about `Opacity: 0;`? – Harry Jul 20 '14 at 06:44
@Harry: for some reason I tried `opacity: 1` on the top box, but not `opacity: 0` on the bottom box. That would be a good hack, for sure. Thanks. I am wondering, though, how to do this "correctly" – Dmitry Minkovsky Jul 20 '14 at 06:45
@Harry here's an updated JSBin w/ that hack: http://jsbin.com/zuyena/7/edit. Looks ok. Still want to know how to do this right. – Dmitry Minkovsky Jul 20 '14 at 06:49
@Harry, yes, totally. You know, I think that's actually good enough of a hack for me! It would be nice to know the proper way, and please post if you find out, but I'm totally cool w/ this approach. Thank you!! – Dmitry Minkovsky Jul 20 '14 at 06:55
@Harry: you may be interested in my answer to this question, too. Figured out what was going on after my new question here http://stackoverflow.com/q/24854509/. The section on perspective at http://learn.shayhowe.com/advanced-html-css/css-transforms was very helpful. – Dmitry Minkovsky Jul 20 '14 at 20:36

Dmitry Minkovsky · Answer 2 · 2018-05-16T15:53:22.927

backface-visibility only kicks in when the transformation angle on an element is explicitly less than 90degs.

However, if an element's perspective is derived from its parent via the perspective and perspective-origin properties, the back face might still be showing, even if the transformation angles specified on that element are greater than -90degs. There is probably no way around this, because that is the nature or deriving perspective from a parent element: the specified degrees of transformation on the child element are not solely responsible for the net transformation.

If you want an element's net transformed angles to be exactly per your specified transformation, then you have to set the perspective directly on that element with transform: perspective($deg).

Check out Is it possible to set perspective-origin on elements that are transformed with transform: perspective()? for more information.

How can I hide the backface of a block element rotated with transform: rotateX()?

2 Answers2