CodeBetter

The CSS transform property is used to apply various two-dimensional and three-dimensional transformations to elements in web documents. It allows you to manipulate the position, size, and orientation of elements, enabling you to create a wide range of visual effects and animations without affecting the document's layout.

The primary purposes of the transform property are as follows:

Position Adjustments
Scaling
Rotation
Skewing
Combining Transformations
3D Transformations

Example:
<html>
<head>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
.abc {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: matrix(1, 0, -1, 1, 1, 0);
}
</style>
</head>
<body>
<div class="main">
<div class="abc">CodeBetter</div>
</div>
</body>
</html>
Output:

CodeBetter

What is the purpose of the CSS transform property?