CSS 3D – Tutorial Index

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

 

 

CSS3 3D Video Tutorials