CSS 3D

Firstly with any 3D environment we need a viewport that is in perspective mode to get a realistic 3D scene. Then comes the simplest yet most important part which is faces. Faces make up our 3D scene and understanding them is vital!

Continuing on let's have a closer look at the origin and normal side of the face.

In this lesson we'll start building the cube. This will give us an insight into preserve 3D which allows child faces to have their own independent transformations.

Now we need to close this cube up by transforming all the faces into their retrospective position. Then we can have a play with the objects origin and the perspective origin.

Taking it further with our cube example I'm going to add content and style up the individual faces. Then we need to animate the cube.

So lets complete the animation of the cube and whilst in the process of adding movement we'll fix the faces that are not showing content correctly.

The most important part of any 3D scene is making sure it works in older browsers. This lesson will look at fallback support so we don't alienate a large marketshare of older browsers.

The 3D gallery will be an object hierarchy eventually. But firstly we must start with the basic 2D environment and use progressive enhancement to shift into the 3D world.

In this lesson we need to finish creating the top and bottom tier objects so we can have an object hierarchy.

Now let's add motion to our object hierarchy and understand more about the parent and child object relationships.

Adding another level will make things more interesting but it will add complications. By adding another level we now have a three level hierarchy and some new problems to solve. Firstly preserve 3D is important in an object hierarchy to maintain not only independent transformations of the child faces but to preserve perspective within the hierarchy. Then we will also look at animating the top level to make our animation even more interesting.

With a little experimentation with existing 3D projects we can create amazing effects in no time at all. These experiments are open for anybody to use.

So we're at the end of our CSS 3D endeavours and now lets overview what we've learned and draw this all to a final conclusion. Thank you for watching my course.