Transformations

In Class CSS 2D Transformations Practices

• 2D Transformations Practice 1


• 2D Transformations Practice 2


• 2D Transformations Practice 3


• 2D Transformations Practice 4


• 2D Transformations Practice 5


• 2D Transformations Practice 6


• 2D Transformations Practice 7


• 2D Transformations Practice 8


• 2D Transformations Practice 9


• 2D Transformations Practice 10


• 2D Transformations Practice 11


• 2D Transformations Practice 12


• 2D Transformations Practice 13


• 2D Transformations Practice 14


• 2D Transformations Practice 15


• 2D Transformations Practice 16


• 2D Transformations Practice 17


• 2D Transformations Practice 18

In Class CSS 3D Transformations Practices

• 3D Transformations Practice 1


• 3D Transformations Practice 2


• 3D Transformations Practice 3


• 3D Transformations Practice 4


• 3D Transformations Practice 5


• 3D Transformations Practice 6

CSS 2D and 3D Transformations Tutorial Practice

• Translate


• Transform-Origins


• Rotate


• Scale


• Skew


• Matrix


• Z-Axis


• 3D Boxes

CSS Transitions Samples

• 2D Transform


• 3D Transform

Reflection Statement

What I Knew

When using 2D Transformations, I knew that you could use values like translate, transform-origins, rotate, scale, skew, matrix, and the z-axis. When using 3D Tranformations, I knew you could use rotation values like rotateY, rotateX, and rotateY.

What I Learned

I learned that when using 2D and 3D Transformations, you can change any angles on the selected property. I also learned that 2D Transformations have more values than 3D Transformations. You can always use these values for cool hovering effects on your page.

What I Still Want to Study

I still want to study on how CSS 2D and 3D Transformations have effects on web pages and if more values will be created in the future.