LAST UPDATED: APRIL 15, 2021
CSS transform property
The transform property in CSS let us rotate or scale or skew or translate an element. It is known for modifying the coordinate space of the CSS visual formatting model. If the property has a clue that is different than the none value, then a stacking context gets created.
In such a case, the element acts as a container block for any position: fixed or position: absolute; elements that it is containing. This property may be specified as one of the keyword values like none, one, or more transform-function values.
Syntax for transform property in CSS
Following is the syntax for the transform property.
transform: none|transform-functions|initial|inherit;
Example: CSS transform property
In the example below, we are using the transform property with different background colors, borders, and different values.
<!DOCTYPE html>
<html>
<head>
<title>The transform property in CSS</title>
<style type="text/css">
div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}
</style>
</head>
<body>
<div>This is the Transformed element</div>
</body>
</html>
Output:
Example 2: CSS transform Property
In the example below, we are using the transform property with different background colors, borders, and different values.
<!DOCTYPE html>
<html>
<head>
<title>The transform property in CSS</title>
<style type="text/css">
div {
border: solid purple;
transform: rotate(0.5turn);
width: 120px;
height: 50px;
}
</style>
</head>
<body>
<div>This is the Transformed element</div>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
36 |
36 |
| Edge |
12 |
12 |
| Firefox |
16 |
16 |
| Internet Explorer |
10 |
10 |
| Opera |
23 |
23 |
| Safari |
9 |
9 |
| Webview Android |
37 |
37 |
| Chrome Android |
36 |
36 |
| Firefox Android |
16 |
16 |
| Opera Android |
24 |
24 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
3.0 |
3.0 |
Conclusion
The initial value for the transform property in CSS is none. This property is applicable to the transformable elements. It is not an inherited property. The percentage value refers to the size of the bounding box. The computed value for this property is the as specified one. The animation type for this property is a transform. This property creates a stacking context.
