Learning Plan 6: CSS3 2D and 3D Transformations

Overview of Learning Plan 6

  • Define 2D transformations.
  • Examine 2D transformation methods.
  • Explore application of 2D transformations.
  • Define 3D transformations.
  • Examine 3D transformation methods.
  • Explore application of 3D transformations.

2D/3D Transformations Practice Exercises Documentation

Description

This practice uses activities from W3Schools to allow you to practice using CSS3 2D and 3D transformations using the following properties: translate, rotate, scale, skew, matrix, and perspective. I documented this practice with screen captures.

Practice Transformations Documentation

Reflection Statement

Before this lesson plan, I already completed this practice on my own so I am familiar with this topic. This practice was a review for me. I still need to practice both 2D and 3D transformations because it is still new to me.

2D and 3D Practice Transformations

Description

For this practice, I had to use a resource book. The resource I chose was "CSS3 Transformations and Animations" by Craig Buckler.

2d practice
CSS3 2D Transformations Practice

3d practice
CSS3 3D Transformations Practice

Reflection Statement

Prior to this learning plan, I did a tutorial on transformations. I have not used them in any website I have coded, though. This was a review but I also learned how to use keyframes to complete a few advanced transformations. I still have to practice and learn more about using transformations.

2D and 3D Transformations Tutorial

Description

For this sample, I had to locate a tutorial on creating 2D and 3D transformations and create some samples.

2d tutorial
2D Tutorial

3d tutorial
3D Tutorial

Reflection Statement

For this tutorial, I used two different resources, one on 2D and one on 3D. I wanted to use to different tutorials so I could practice creating transformations from different sources. I think this will help me learn transformations better.

2D and 3D Transformations Project

transformation project

Description

In this project, I had to take the skills covered in this lesson plan and apply them in the creation of sample 2D and 3D transformations. I created samples using all the 2D and 3D transformation properties.

CSS3 2D/3D Transformations Project

Reflection Statement

I enjoyed coding this project. I used three different resources for this project. I wanted to do more advanced transformations than I used in previous tutorials. I was able to create more advanced transformations that built onto what I previously coded. I still have a lot to learn but this was a great start.