4.8 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
136 students enrolled
Wishlisted Wishlist

Please confirm that you want to add CSS 3D to your Wishlist.

Add to Wishlist


Create amazing 3D environments with nothing more than CSS! In the process learning how to safely implement CSS 3D.
4.8 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
136 students enrolled
Created by Lawrence Turton
Last updated 8/2014
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • To understand the 3D environment
  • Create a CSS 3D environment with viewports, faces & objects
  • Have an understanding of both fallback support & progressive enhancement
View Curriculum
  • HTML
  • CSS 2 & 3
  • Jquery
  • SCSS

This course will be sure to excite the web developers of tomorrow and extend their knowledge of transforming into the 3D space! You can create some of the most engaging experiences by using 3D in the latest browsers. This course will also demonstrate implementing CSS 3D safely for older browsers.

Another advantage is hybrid apps for desktop and mobile devices, which means you can use CSS 3D in certain apps!

Who is the target audience?
  • Web Developers/Designers that want to further their skills in CSS
Students Who Viewed This Course Also Viewed
Curriculum For This Course
18 Lectures
Getting Started
5 Lectures 01:10:47

I will first show you all the cool CSS 3D projects we'll be building throughout this course. Then we'll also look at some requirements before taking this course. Here are the links related to the video:

Cartoonsmart Bundle:

Free SASS & SCSS Lesson:

Preview 02:20

Throughout this course we'll be working with a free program called Blender. In this lesson we'll get to grips with the program so we can use it to understand what's happening in the browser.

Preview 23:03

To understand the browsers 3D environment we must first demonstrate what we mean by, viewport, orthographic, perspective, perspective origin and much more. If we understand these things before hand it will help us dramatically!

Preview 15:08

Knowledge of 3D terminologies is important but now we must put it into practice.

Preview 13:18

Before beginning with CSS we need to have an understanding of the development setup, allowing us to easily jump into projects.

Preview 16:58
2 Lectures 37:26

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!

Viewport & Creating Faces

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

Faces Part Two
Cube Example
5 Lectures 01:32:37

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.

Creating a Cube

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.

Completing Faces of the Cube

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.

Extending & Animating 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.

Completing 3D Cube Animation

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.

Cube Fallback Support
Gallery Example
4 Lectures 01:10:27

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.

Object Hierarchy Progressive Enhancement

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

Object Hierarchy Creating Objects

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

Object Hierarchy Animation

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.

Finish Object Hierarchy Animation
Experimenting & Conclusion
2 Lectures 31:26

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.

Cool CSS 3D Projects

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.

Overview & Conclusion
About the Instructor
Lawrence Turton
4.6 Average rating
9,702 Reviews
98,284 Students
7 Courses
Technical Instructor

Lawrence Turton works as a web developer & graphic designer specialising in HTML, CSS, jQuery, UI & UX design. He has previously worked with Fifteendesign producing websites, iPhone and Android apps and started his own agency in 2010 called Elite Web Design. During that time Lawrence has established a wide range of clients from blue chip companies to large corporations. From a young age he was an online instructor and started to work with two of the leading online training specialists Cartoonsmart and Envato. Lawrence always created projects involving designs in Photoshop and bringing his creations to life by coding them with web technologies. This gives him a unique perspective into real world projects from start to finish and a wealth of information for new comers to the web industry.