To sign up for this course visit the sales page. If you are logged in and have already purchased the course, you can get started now.
If you purchased this course and can’t access the links below, please contact us for updated access.
CSS 3D Tutorials - Lifetime Access
Learn how to transform your site with all the cool 3D features of CSS, while keeping it safe for older browsers. If you’ve got some familiarity with the 2D properties of CSS, you’ll have no problem jumping head-first into exploring the 3D aspects. To get you comfortable with the 3D environment and terms like “z-axis, orthographic”, the course begins by using Blender, a free program, you can use to visually play around in a three-dimensional space (without having to tinker with CSS code). Once you get used to thinking in 3D space, our fantastic instructor Lawrence Turton will guide you through some amazing CSS projects. You can even get started with the course for free.
| Module 1 | Introduction and Blender Overview | |
| These videos will introduce the course and how to use Blender to familiarize yourself with 3D concepts and terminology. | ||
| Unit 1 | CSS 3D - Tutorial Assets | |
| Unit 2 | Introduction to the course | |
| Unit 3 | Quick Overview of Blender | |
| Unit 4 | 3D Terminology | |
| Unit 5 | From Blender to the Browser | |
| Module 2 | CSS3 and creating a 3D Environment | |
| In these videos we will look at setting up the 3d environment, viewport, creating faces, and much more. | ||
| Unit 1 | Setting up the Development Environment | |
| Unit 2 | Viewport & Creating Faces | |
| Unit 3 | Creating Faces (continued) | |
| Module 3 | Creating a 3D Cube Animation | |
| This series of videos will teach you how to create and animate a 3D cube. | ||
| Unit 1 | Starting the Cube | |
| Unit 2 | Completing Faces of the Cube | |
| Unit 3 | Extending & Animating the Cube | |
| Unit 4 | Completing 3D Cube Animation | |
| Unit 5 | Cube Fallback Support | |
| Module 4 | Object Hierarchy Animation | |
| This series of videos will show you how to create spinning layers of images in a hierarchy. | ||
| Unit 1 | Object Hierarchy Progressive Enhancement | |
| Unit 2 | Object Hierarchy Creating Objects | |
| Unit 3 | Object Hierarchy Animation | |
| Unit 4 | Finish Object Hierarchy Animation | |
| Module 5 | Cool 3D Projects | |
| In these last videos we will explore ImpressJS and Oridomi to create some very cool 3D examples. | ||
| Unit 1 | Cool CSS 3D Projects | |
| Unit 2 | Overview & Conclusion | |
| Module 6 | SASS and SCSS | |
| This is a bonus extra lesson covering SASS and SCSS | ||
| Unit 1 | CSS 3D Tutorial Bonus - SASS and SCSS | |
