The Ultimate CSS Animation Series Part 1: Transform Basics
🧬 Course Overview
Did you ever feel like you are somehow good at designing simple websites using CSS but couldn’t create animated website content with your creative imagination that makes your website more inspirational & engaging to customers?
This course is required very basic knowledge of CSS (e.g. able to change the background color using CSS). Although I will cover essential CSS concepts that will be needed for CSS animations.
After completing this course, you will feel confident to create any type of CSS animation project for your websites or clients. Because, at the end of each part of this series, I will put everything into practice to test your knowledge.
🩺 Why CSS Animations?
So why not learn CSS Animations instead of using slow chaotic third-party libraries?
🧠 The “2–1” Method
Before getting started this course, there is one more thing. I want you to follow a smart learning technic that will help you to learn effectively from videos or articles in under 3 minutes.
The human brain is designed to accomplish goals. On the other hand, a lot of programmers often get frustrated and then quit by trying to learn all things overnight without setting any simple GOALS.
To solve this problem, I created a smart system that will help you overcome procrastination and accomplish your learning goals one step at a time. I call this system the 2–1 method. Meaning 120s = theory + 60s = test/practice. This technic is much more effective for educational videos & articles. You will see that in minutes.
So I will discuss a single concept for 2 minutes and then immediately will put it into practice.
🚌 Part 1: CSS Transformation Basics
CSS transformation refers to one of the core CSS Animation properties called “transform”. In this series, we are going to learn the basic concept of this property right away.
We’ll cover the following:
- 🤷♂️ What is CSS Transformation?
- 🚙 2D Transformations
- 🕵️♀️ Explanation
🤷♂️ What is CSS Transformation?
CSS Transformations modify the coordinate space of the CSS visual formatting model on a 2D or 3D axis. In CSS we have a bunch of functions for transforming elements. The transform CSS property lets you rotate, scale, skew or translate an element.
🚙 2D Transformations
2D Transform property will animate an HTML object in 2D space.
You can use the following 2D transformation methods:
Let’s discuss each of these functions a bit more. In the upcoming series, you will learn everything in full detail.
rotate()→ Rotating an element
scale()→ Making an element larger or smaller
skew()→ To skew elements in a two-dimensional space (2D)
translate()→ Used to reposition an element in the horizontal and/or vertical directions
matrix()→ Combine all the above 2D transform functions into one property
x,y→ Defines animating object along horizontal (x) or vertical (y) axis
Note: We will go through each of these properties in both 2D & 3D space in the coming series.
Let’s test your knowledge of what you have learned so far.
“The person who don’t test his knowledge is like the one who never check his wedding clothes in the mirror”
― A Nameless Wise Men
Here is the online quiz game that I made purely depending on this series and here are the quizzes in the image format below.
Each question consists of 2 marks out of 5 questions. Don’t try to look at the answers before trying to solve yourself and let us know what is your score so far.
Next, we will look through transform functions from various perspectives in any project.
Feel free to comment below if you get stuck or something. Because your single comment may help a lot of developers who are taking this course.
Also, I’m always here to help you. I’m going to post inspiring programming courses for free.
Thank you for your reading and Happy Coding!