Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

3D Transforms in CSS - Creating Complex Shapes and Animations

Web Conferences Amsterdam via YouTube

Overview

Explore advanced 3D transforms in CSS through this conference talk from CSS Day 2014. Delve beyond basic cube examples to create complex shapes like Archimedean, Catalan, and Johnson solids. Learn techniques for adding shading with CSS gradients, animating shapes with keyframes, and transforming objects through expansion, vertex truncation, or exploding and recombining parts. Follow along with provided slides and experiments as speaker Ana Tudor covers topics including polygons, pyramids, dodecahedrons, transform styles, and animation stages. Gain insights into creating impressive 3D effects and animations using pure CSS, with practical code examples and a final showcase of the techniques in action.

Syllabus

Intro
Polygons
Types of polygons
Things to remember
Lateral Edge
Pyramid Edge
Dodecahedron
Pyramids
Shallow Pyramid
Transform Style Preserve Freedom
Fixing Transform Style Preserve Freedom
Polyhedrons
Pentagon Diagonal
Animation Stages
Code
Final Result

Taught by

Web Conferences Amsterdam

Reviews

Start your review of 3D Transforms in CSS - Creating Complex Shapes and Animations

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.