CSS 2D Transforms
It allows you to move, rotate, scale, and skew elements.
1. Rotate -
Example -
|
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.rotate {
width: 100px;
height: 100px;
background: teal;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="rotate"></div>
</body>
</html>
|
Output-
This example will rotate the div by 45 degrees clockwise. The center of rotation is in the center of the div, 50% from left and 50% from top. You can change the center of rotation by setting the transform-origin property.
The above example will set the center of rotation to the middle of the right side end.
2. Scale -
Output -
This example will scale the div to 100px * 0.5 = 50px on the X axis and to 100px * 1.3 = 130px on the Y axis. The center of the transform is in the center of the div, 50% from left and 50% from top.
3. Skew
Example -
Output -
This example will skew the div by 20 degrees on the X axis and by - 30 degrees on the Y axis. The center of the transform is in the center of the div, 50% from left and 50% from top.
4. Multiple transforms
Example-
Output -
This will rotate the element 15 degrees clockwise and then translate it 200px to the right.
