From the course: CSS: Animation

Unlock the full course today

Join today to access over 24,600 courses taught by industry experts.

Simple 3D transforms

Simple 3D transforms - CSS Tutorial

From the course: CSS: Animation

Simple 3D transforms

- [Instructor] One of the most interesting things about CSS transforms is how easily they allow us to create the effect of 3D. I'll be touching on the basics of 3D transforms in this video, but there are other CSS courses in the library that cover this in much more depth as well. Getting to 3D in CSS can be as straightforward as just rotating around the x or y-axis. Doing that angles part of the object on screen away from you and that makes you get a 3D effect. I'll use this robot image to demonstrate. It's just an image sitting in a HTML page, but I can still apply 3D transforms to it. In my CSS file, I'll add a transform rule to our robot image. So we will transform this and we will give it a rotation on the x-axis of 45 degrees. In browsers, the x-axis is the one that runs horizontally, so it's essentially like we are rotating around a pole going through the middle of this image. If we save this and preview it in…

Contents