mardi 21 avril 2015

CSS3 backface visibility on grand children of rotating element

Note: CSS is in the codepen examples

CONTEXT: I want to rotate a set of elements (lets call them parents) aligned as a column. Each parent has 2 children (2 faces: front and back).

<div class="parent">
  <div class="front"></div>
  <div class="back"></div>
</div>
<br />
<div class="parent">
  <div class="front"></div>
  <div class="back"></div>
</div>
<!-- many more -->

The animation is going to be added later in time with JavaScript and for the purpose of the question, lets say that there will be 10 columns with 10 rows, and rotating 100 elements in some android phones with some crappy browsers will definitely look odd.

What I want to avoid is to add the rotate animation to each "parent" because I know each animation wont always start at the same time.

MY SOLUTION: I created a container element for each column (called rotator) to only have to rotate that element and all "parent" elements were going to be rotated at the same time. It works, and I know it has much better performance.

<!-- one column -->
<div class="rotator">
  <div class="parent">
    <div class="front"></div>
    <div class="back"></div>
  </div>
  <br />
  <div class="parent">
    <div class="front"></div>
    <div class="back"></div>
  </div>
  <!-- many more -->
</div>

PROBLEM: The problem is that backface-visibility only works if I'm rotating the "parent" element. If I rotate the "rotator" element I can only see the "back" face but never the front.

Here is the solution with the rotator, this is the one that has the problem.

And here is the working example without the rotator, this is what I want to achieve but using a rotator.

QUESTION: How can I make it so using a rotator element will still allow backface-visibility to work as supposed to?

Aucun commentaire:

Enregistrer un commentaire