CSS CSS Transitions and Transforms Adding 3D Effects with CSS Create a Flipping Animation with 3D Transform Properties

why side-a and side-b are hidden?

I do not understand why we Guil has used

.side-a,
.side-b{
  backface-visibility:hidden;
}

why not just use side-a? I ommitted .side-b used and I don't see any difference

2 Answers

Steven Parker
Steven Parker
170,303 Points

By using that setting, each side will only be visible when it it facing the viewer. And by rotating one of them 180 degrees to start with, and then moving them together, they will act like one thing with a different image on each side.

Now based on stacking order, one could obscure the other if they are both visible. Since you did not notice a difference when you omitted the setting for side-b, I'd bet that side-a is "in front" of side-b and just covers it.

Jesse Dispoto
Jesse Dispoto
Front End Web Development Techdegree Graduate 13,122 Points

Did you watch the whole video? He then takes away the backface-visibility declaration from side-b, and leaves side-a. This is because we do not want to hide the backface of side-b, we only want to hide side-a's backface, allowing side-b to be displayed - of course after we give it the transform-style property of preserve-3d, that way the 2 sides can now accept 3d properties, allowing us to display the backside and then scaling it so it doesn't show up backwards once it turns around.