Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

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.