A good way to give the website some animations or transitions is to use the transform property in CSS. The problem is if we want to change just one of the transform properties later on, we must write the whole definition again for all properties.
Example:
.childBlock1:hover {
transform: translateX(0%) rotate(0deg) scale(0.9);
}
@media (max-width: 800px) {
.childBlock1:hover {
transform: translateX(0%) rotate(0deg) scale(1);
}
}
In this example, the block will reduce its scale when we hover it with the mouse but we don’t want to have this effect when the screen is lower than 800px. As we see from all the 3 properties (translate, rotate and scale), only scale changed here, yet we have to repeat all other parts.
This is not the case anymore, with individual transform properties we can adapt each property individually.
This is the same as the code above. The code is now simpler and cleaner and we don’t have to go through the trouble of writing the other properties.
.childBlock1:hover {
scale: 0.9;
}
@media (max-width: 800px) {
.childBlock1:hover {
scale: 1;
}
}