EN
CSS - multiple transformations at once
0
points
In this article, we would like to show you how to add multiple filters at the same time using CSS.
Quick solution:
.element {
transform: translate(50px, 50px) rotate(45deg) scale(2) /* put more transforms here ... */;
}
Where:
- transformation should be read from right to left
It means, the object will be:- scaled up 2 times (according to element size),
- rotated by 45 degrees (in clockwise direction around its own center),
- translated by [
50px,50px] (according to input position),
- we can put more
translate(),rotate()andscale()transformations separating them by spaces one by one.
Practical example
In this example, we used translate(), rotate() and scale() transformations at once.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
height: 150px;
}
.element {
width: 25px;
height: 25px;
background: green;
transform: translate(50px, 50px) rotate(15deg) scale(2);
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>