Check out a free preview of the full CSS In-Depth, v2 course:
The "Backface Visibility & Box" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle shows how to hide the back of a 3D translated element. The box will be added in the future.

Get Unlimited Access Now

Transcript from the "Backface Visibility & Box" Lesson

[00:00:03]
>> Estelle Weyl: When we did CSS mastery and we had the snowflakes coming down. The reason that they're going left and right and floating is because the transform origin is actually outside of their center. So they're being translated from top to bottom, but they're spinning and they're spinning around a point that is not in the center.

[00:00:28] So they're basically spinning around going like this, but since they're going down, they're actually going like that. So all of them are doing this, but you can't really see that it's doing that because it's so slow.
>> Estelle Weyl: Kinda cool? So that was the magic of transform-origin. So the keyword positions are left, right, bottom, top, and center.

[00:00:50] You can use any length value or any percentage value. The default is the center, at 50 50%. And it's and I should get rid of Prefixed. It's basically supported in any browser that supports transforms, supports transform-origin, and you don't need to prefix it because prefixing is no longer necessary.

[00:01:09] Then, we have transform-style, and that is for 3D features. If you have a 3D element on top of another 3D element, it's basically, do you wanna preserve 3D, or do you wanna make it flat? It's how to handle nested elements that also rendered in a 3D space. Oddly, there's a few properties where it won't work if that you have it at the default value.

[00:01:37] So if you've declared overflow, clip, clip-path, filter, mask-border-source, mask-image or mix-blend-mode, which are all properties that we haven't covered yet. See why this book is so big? Then it doesn't actually do anything. It's set on the parent and I tried making it appear like what it would look like.

[00:02:04] So basically the parent is translated in the 3D space and so is the child and the child is kinda coming at you, if it was actually flat it would not. Okay, backface-visibility. I was talking about RSVP, when you flip it, you don't wanna see it backwards, because you don't want to see these upside down.

[00:02:27] So basically, here both of these have translated 180 degrees and one you can see, and the other you can't. So here there actually is generated content. If I do 0 you can see both of them. If I do 90, you can see neither of them. If I do 85 degrees, you can see both of them but barely.

[00:02:52] But if I do a 105, one of them you can't see it all because I did backface-visibility: hidden. But the first one I did backface-visibility: visible, and if you can see you can't actually read RSVP. So let's actually do it completely upside down.
>> Estelle Weyl: Right? They're both translated in the exact same way, or rotated in the exact same way.

[00:03:21] One is backwards, and I'm saying you can't look at it now.
>> Estelle Weyl: And let me just see if, okay I didn't show. So when you'll see like playing cards or something like that online, You'll have a plain card here and this is the face. And this is the back of the card.

[00:03:40] And so you rotate both and you think it's doing this, but really you can't do this. They're both doing that. They're both rotating. But when it hits this mark, you want this one to be seen. And you don't want this one to be seen anymore. You don't want the one in front just show the backwards, like the back of the RSVP.

[00:04:00] You wanna show the back of the card, you don't wanna show the ace. They're all basically the same. Okay, the king, you don't want the K to be backwards, like if you had a king and you rotated it Like this, and you saw the cards still, the K would be backwards.

[00:04:18] So you want to make it look like the face of the card is going behind here, and you do that by saying, you can do it one of two ways. You can actually change the z index or you can just say back face visibility hidden.
>> Estelle Weyl: This isn't supported yet or it's just starting to be, it's in Firefox, it's in Chrome 64 and Upper 51.

[00:04:42] So it's something I haven't played with yet but it's basically the viewbox, so the transform box properties, so in the future this would be a property
>> Estelle Weyl: In the future transform-box property will have a value of border-box, which means that the border is the box reference. It will have fill-box which will be the bounding-box as a reference box, and then view-box which is currently in SVG.

[00:05:08] It's kinda like the view box on SVG but it's not yet supported so I can't really explain it yet because I don't really know it.