CSS In-Depth, v2

# 3D Transform Functions & Properties

Check out a free preview of the full CSS In-Depth, v2 course:
The "3D Transform Functions & Properties" 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:

## Transforming in 3D adds a few more functions including scale3d, rotate3d, matrix3d & perspective.

Get Unlimited Access Now

Transcript from the "3D Transform Functions & Properties" Lesson

[00:00:02]
>> Estelle: Okay, so, let's do 3D transforms. In this slide it's basically all of the functions are highlighted that will put it into a 3D space. So there's translate3d or translateZ. So we had translateX, translateY, and translateZ. Basically translate 3D is X, Y, and Z. Scale 3D will scale it in three dimensions.

[00:00:30] Or you could just scale Z. Rotate 3D can take three numbers in an angle. I don't think I've ever used that. I just basically use rotate. RotateZ is just the angle. Matrix 3D has 15 vales and then there's also a prospective function. So the perspective function doesn't matter unless you are rotating it into 3D space.

[00:00:57] And perspective will basically allow you to make it say where are you standing and, if you're looking at the horizon, it looks like the world is ending over there, but it's actually my perspective. And that building looks like it's getting smaller, but it's not. For those watching this, I can see out a window, which is weird.

[00:01:19] I usually can't when I'm programming. Okay. 3D transforms lots of green. So let's look at related properties. We have perspective or perspective both the perspective as a function of the transform element and then perspective as a property in and of itself. We have transform origin which is what point are we starting the transform from.

[00:01:47] We have transform style which is whether we wanted to make it flat or we wanna preserve the three dimensions. Then we have perspective origin, which is position relative to the parent where are we looking at it from. And then back face visibility. So we don't see that RSVP upside down.

[00:02:03] As something is something's back is towards us.