From the course: CSS: Transforms and Transitions
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Perspective in 3D space - CSS Tutorial
From the course: CSS: Transforms and Transitions
Perspective in 3D space
- [Instructor] In this video chapter, I'm going to show you how to work in 3D space and create 3D objects. But before creating any 3D objects, we need to get grounded, so to speak, in how to manage 3D space, using CSS. The first thing I need to do is to create a container for my 3D space. Now here in this demo page, I have two elements, a container element, and within it, a figure, which in this case, is Shepherd Boy by the artist Peter Paul Rubens. And that figure is nested within the container. Now I can rotate this inner object and let's try that, around both the x- and the y-axis. And as I do the rotation, I do get a feeling of 3D space. But now let's rotate the container and see what happens. I lose that illusion, in fact, Shepherd Boy appears to be painted onto the surface of the container with no illusion of depth and it doesn't appear part of the 3D space that the container is in. But we can fix that by using the transform style shown here, changing it's default value from…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.