CSS3 2D and 3D Transformations

Overview

In Module 6 we dived into Transformations. In the past, there was more code (JavaScript and the use of Flash) that needed to be built to create a transformation but with the new CSS3 properties it is much easier to do a 2D or 3D transformation.

Part 1: CSS 2D and 3D Transformations Sample Practice Work

Description

For this practice, we explored several resources to practice 2D and 3D properties. We were then asked to make sample pages for both to demonstrate our learning. The properties we explored included translate, rotate, scale, skew (X and Y), matrix, matrix3D, translate3D, translate (X, Y, and Z), scale3D, scale (X, Y, and Z), rotate3D, rotate (X, Y, and Z), and perspective.

Practice

Reflection

The concepts for 2D seemed intuitive and created subtle but effective enhancements to the elements. Learning 3D was more difficult, more complex. It was a bit harder grasping the concept of 3D, some of the transformations seem similar to 2D versions. It was fun trying different options in 2D and 3D to see what would happen!

Part 2: CSS 2D and 3D Transformations Project

Description

For this project, we were to take one of existing layouts and apply the transformation properties to that layout. I chose to use the Pattycake Pizza layout from earlier in the course. I added an additional page (Menu) to be able to effectively demonstrate 2D and 3D properties in a real world way (somewhat).

Practice

Reflection

This project turned out to be more work than I thought it would be! It really exercised my knowledge of transformations and general CSS. Applying the transformation in a meaningful way and integrating them so they were not too much of a distraction was challenging. It is easy to see how transformations can be used to make a website more interesting, even the most subtle of changes like a scaled button adds a touch of interactivity and provides clear visual feedback to the user. Fun chapter - it's amazing to see what code can do!