[Edit]

CSS - multiple transformations at once

1 contributors

2 contributions

0 discussions

0 points

Created by:

elmer

646

In this article, we would like to show you how to add multiple filters at the same time using CSS.

Quick solution:

xxxxxxxxxx
 
.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:
1. scaled up 2 times (according to element size),
2. rotated by 45 degrees (in clockwise direction around its own center),
3. translated by [50px, 50px] (according to input position),
we can put more translate(), rotate() and scale() transformations separating them by spaces one by one.

Practical example

Edit

In this example, we used translate(), rotate() and scale() transformations at once.

xxxxxxxxxx
 
<!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>