CODEWITHSUNDEEP
htmlcss
pgarciacamou
pgarciacamou

Reputation: 1732

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?

Upvotes: 2

Views: 442

Answers (2)

vals
vals

Reputation: 64194

You need to set preserve 3d for this layout to work

.rotator {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;  
    width: 10em;
    height: 10em;
    transform-style: preserve-3d;   /* added */
}

codepen

Upvotes: 6

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

I feel that since your back and front div are inside .parent div it will literally not rotate the divs unless and until you provide animation to it!!! So you need to add animation property to .parent as below.

.parent {
  position: relative;
  width: 10em;
  height: 10em;
  -webkit-transform-style: preserve-3d;
   -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  transform-style: preserve-3d;
}

Here is the DEMO

Upvotes: 0

Related Questions