CODEWITHSUNDEEP
css
Dmitry Minkovsky
Dmitry Minkovsky

Reputation: 38143

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

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.

Upvotes: 1

Views: 409

Answers (2)

Dmitry Minkovsky
Dmitry Minkovsky

Reputation: 38143

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.

Upvotes: 1

MeTe-30
MeTe-30

Reputation: 2542

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;
}

Upvotes: 2

Related Questions