Learn CSS transform animation | Zero to Hero
Control your website elements movement
In this article, we learn how to control the website elements (div, image, etc.). In other words, we are going to change the size, shape, and position of the web page elements, and they are all of the features that we can do with transform function.
Before starting to work with CSS animation with “transform” property, we should know the prerequisite, which is the CSS transition property. CSS transition property helps us to change CSS properties (background-color, font-size, etc.) smoothly at a particular time. If you are not familiar with CSS transition property, this article is short and straightforward, and also has fluent text for learning CSS transition property.
What is the CSS transform?
Control the website elements movement form one state to another.
Transform functions
Transform property has four functions that we can use to control how our elements would be displayed.
These are the functions:
- Translate: move the element and changing its position.
- Scale: for resizing elements.
- Rotate: rotate the element in a 2D environment, by any degree or any number of turns we want.
- Skew: skew the element along the x-axis or y-axis.
1. Translate
This function changes the position of the element like div, image, etc. along the browser x-axis or y-axis or both. We can use three different forms of usage:
Translate only in the x-axis:
transform: translateX(x-axis value);Translate only in the y-axis:
transform: translateY(y-axis value);Translate both in x-axis and y-axis:
transform: translate(x-axis value, y-axis value);For example, let’s look at these lines of codes below:
transform: translateX(10px); // Move 10 pixels to the right
transform: translateX(-10px); // Move 10 pixels to the lefttransform: translateY(10px); // Move 10 pixels towards the bottom
transform: translateY(-10px); // Move 10 pixels towards the toptransform: translate(10px, 10px); // Move 10 pixels to the right and 10 pixels towards the bottom
Let’s try them in the real world:
<button class=”button”>Translate</button>.button {
height: 50px;
width: 120px;
font-size: 20px;
color: white;
border: none;
border-radius: 4px;
background-color: blue;
transition-duration: 2000ms;
cursor: pointer;
}.button:hover {
transform: translateX(500px); // Move 500 pixels to the right
}
Note: If you look at the code snippet above, you understand that we used “transition-duration.” If you are not familiar with CSS transition property or you forget how to use it, then you can take a quick look at the article below to learn or remind it again.
<button class=”button”>Translate</button>.button {
height: 50px;
width: 120px;
font-size: 20px;
color: white;
border: none;
border-radius: 4px;
background-color: blue;
transition-duration: 2000ms;
cursor: pointer;
}.button:hover {
transform: translateY(300px); // Move 300 pixels towards the bottom
}
<button class=”button”>Translate</button>.button {
height: 50px;
width: 120px;
font-size: 20px;
color: white;
border: none;
border-radius: 4px;
background-color: blue;
transition-duration: 2000ms;
cursor: pointer;
}.button:hover {
transform: translate(200px, 200px); // Move 200 pixels to the right and 200 pixels towards the bottom
}
2. Scale
This function allows us to resize the elements. In other words, changing the element’s width or height or both of those aspects. Like the translate function, we can use three different forms of usage:
Scale only in the x-axis:
transform: scaleX(x-axis value);Scale only in the y-axis:
transform: scaleY(y-axis value);Scale both in x-axis and y-axis:
transform: scale(x-axis value, y-axis value);For example, let’s look at these lines of codes below:
transform: scaleX(2); // Increase image width twice the original size
transform: scaleX(1.5); // Increase image width one and a half times the original sizetransform: scaleY(2); // Increase image height twice the original size
transform: scaleY(1.5); // Increase image height one and a half times the original sizetransform: scale(2, 2); // Increase both image width and height twice the original size
Let’s try them in the real world:
<button class=”button”></button>.button {
height: 80px;
width: 120px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
transition-duration: 2000ms;
cursor: pointer;
}.button:hover {
transform: scaleX(5); // Increase image width five times the original size
}
<button class=”button”>Translate</button>.button {
height: 80px;
width: 120px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
transition-duration: 2000ms;
cursor: pointer;
}.button:hover {
transform: scaleY(5); // Increase image height five times the original size
}
<button class=”button”>Translate</button>.button {
height: 80px;
width: 120px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
transition-duration: 2000ms;
cursor: pointer;
}.button:hover {
transform: scale(10, 5); // Increase both image width and height respectively ten times and five times the original size
}
3. Rotate
This function rotates elements in a 2D environment. It accepts one value, which is the angle or the number of degrees.
transform: rotate(rotation value);The rotation value can be positive or negative. The positive value rotates the element clockwise, and the negative value rotates the desired web page element counterclockwise. Look at some examples below:
transform: rotate(150deg); // Rotate 150 degrees clockwise
transform: rotate(-80deg); // Rotate 80 degrees counterclockwiseAlso, we can use three different forms of value in the rotate function:
- Degree: use to rotate the elements in certain degrees.
- Turn: use to rotate the elements in a certain number of turns.
- Gradient: use to rotate the elements at a certain angle.
For example, let’s look at these lines of codes below:
transform: rotate(200deg); // Rotate 200 degrees clockwise
transform: rotate(-360deg); // Rotate 360 degrees counterclockwisetransform: rotate(1 turn); // Rotate 1 turn clockwise (360 degrees)
transform: rotate(-0.5 turn); // Rotate half a turn counterclockwise (-180 degrees)transform: rotate(200grad); // Rotate 200 gradients clockwise (half a turn)
transform: rotate(-200grad); // Rotate 200 gradients counterclockwise (half a turn counterclockwise)
Note: In the real-world, the rotation function is used with degrees most of the time.
Let’s try some practice in the real world:
<div class=”item”>
<span class=”title”>Clockwise</span>
<div class=”box box1">Rotate 180</div>
</div>
<div class=”item”>
<span class=”title”>CounterClockwise</span>
<div class=”box box2">Rotate -45</div>
</div>.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
}.title {
color: #555;
text-align: center;
font-size: 20px;
margin-bottom: 50px;
}.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 150px;
height: 150px;
background-color: lime;
border-radius: 10px;
font-size: 20px;
color: blue;
transition: all 2000ms linear;
}.box1:hover {
transform: rotate(180deg); // Rotate 180 degrees clockwise
}.box2:hover {
transform: rotate(-45deg); // Rotate 45 degrees counterclockwise
}
4. Skew
Skew functions, skew elements horizontally and vertically. It is like to translate and scale mentioned earlier. Meaning we have skew X to skew elements horizontally and skew Y to skew them vertically, or we can just use skew.
Skew is similar to rotate in terms of units. We use degrees to determine the amount of skew. It has a positive or negative value, like the rotate function. So let’s look at three different forms of skew function:
Skew horizontally:
transform: skewX(horizontal value in degrees);Skew vertically:
transform: skewY(vertical value in degrees);Skew both horizontally and vertically:
transform: skew(horizontal value in degrees, vertical value in degrees);For example, let’s look at these lines of codes below:
transform: skewX(100deg); // Skew 100 degrees horizontally
transform: skewX(-200deg); // Skew -200 degrees horizontallytransform: skewY(150deg); // Skew 150 degrees vertically
transform: skewY(-45deg); // Skew -45 degrees verticallytransform: skew(60deg, 90deg); // Skew 60 degrees horizontally and 90 degrees vertically
Let’s try them in the real world:
<button class="button">Skew X</button>.button {
height: 80px;
width: 120px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
transition-duration: 2000ms;
cursor: pointer;
}.button:hover {
transform: skewX(30deg);
}
<button class="button">Skew Y</button>.button {
height: 80px;
width: 120px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
transition-duration: 2000ms;
cursor: pointer;
}.button:hover {
transform: skewY(30deg);
}
<button class="button">Skew</button>.button {
height: 80px;
width: 120px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
transition-duration: 2000ms;
cursor: pointer;
}.button:hover {
transform: skew(50deg);
}
Transform origin
For finishing the transform function features, it is necessary to know about transform-origin. It is the point that our transform takes as a reference when it works. Transform origin accepts keywords as one value like top, bottom, right, and left. Also, we can combine these values. Let’s look at the real-world example:
Let’s try all of the possible ways:
Set the rotation pivot to top and bottom:
<div>
<button class="btn btn1">transform-origin: top</button>
<button class="btn btn2">transform-origin: bottom</button>
</div>.btn {
height: 80px;
width: 270px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
cursor: pointer;
transition-duration: 1000ms;
margin: 20px;
}.btn:hover {
transform: rotate(30deg);
}.btn1 {
transform-origin: top; // set the rotation pivot to top
}.btn2 {
transform-origin: bottom; // set the rotation pivot to bottom
}
Note: the green circle in the images is only for guidance.
Set the rotation pivot to the right and left:
<div>
<button class="btn btn1">transform-origin: right</button>
<button class="btn btn2">transform-origin: left</button>
</div>.btn {
height: 80px;
width: 270px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
cursor: pointer;
transition-duration: 1000ms;
margin: 20px;
}.btn:hover {
transform: rotate(30deg);
}.btn1 {
transform-origin: right; // set the rotation pivot to right
}.btn2 {
transform-origin: left; // set the rotation pivot to left
}
Set the rotation pivot to top-right and top-left:
<div>
<button class="btn btn1">transform-origin: top right</button>
<button class="btn btn2">transform-origin: top left</button>
</div>.btn {
height: 80px;
width: 270px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
cursor: pointer;
transition-duration: 1000ms;
margin: 20px;
}.btn:hover {
transform: rotate(30deg);
}.btn1 {
transform-origin: top right; // set the rotation pivot to top-right
}.btn2 {
transform-origin: top left; // set the rotation pivot to top-left
}
Set the rotation pivot to bottom-right and bottom-left:
<div>
<button class="btn btn1">transform-origin: bottom right</button>
<button class="btn btn2">transform-origin: bottom left</button>
</div>.btn {
height: 80px;
width: 270px;
font-size: 20px;
color: white;
border: none;
background-color: blue;
cursor: pointer;
transition-duration: 1000ms;
margin: 20px;
}.btn:hover {
transform: rotate(30deg);
}.btn1 {
transform-origin: bottom right; // set the pivot to bottom right
}.btn2 {
transform-origin: bottom left; // set the pivot to bottom left
}
Last word
Indeed, CSS animation is your imagination and also your creativity. If you want to be an expert in this context, you should play with CSS animation properties and, of course, taking time to work with it. You can build all of your dreams animation if you want.
