Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

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

Jesse Dispoto
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Dispoto
Front End Web Development Techdegree Graduate 14,538 Points
Jesse Dispoto
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Dispoto
Front End Web Development Techdegree Graduate 14,538 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.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 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.