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:
xxxxxxxxxx
1
.element {
2
transform: translate(50px, 50px) rotate(45deg) scale(2) /* put more transforms here ... */;
3
}
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.
In this example, we used translate()
, rotate()
and scale()
transformations at once.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
body {
7
height: 150px;
8
}
9
10
.element {
11
width: 25px;
12
height: 25px;
13
background: green;
14
transform: translate(50px, 50px) rotate(15deg) scale(2);
15
}
16
17
</style>
18
</head>
19
<body>
20
<div class="element"></div>
21
</body>
22
</html>