CSS Transform() Property

CSS Transform() Property. The transform property in CSS is used to scale, translate, skew, or rotate any HTML element. This transform property transforms the parallel space of the obvious formatting pattern in CSS. This transform property is also applied to any 3D or 2D HTML conversion to the element.

Read Also: CSS Translate() Function.

This transform property in CSS can be done with multiple functions. Based on this purpose arguments transform action performed.

Example CSS Transform() Property

<h1>The transform Property</h1>
<h2>transform: rotate(30deg):</h2>
<div class="a1">softcodeon.com!</div>
<br>
<h2>transform: skewY(30deg):</h2>
<div class="a2">softcodeon.com!</div>
<br>
<h2>transform: scaleY(2.5):</h2>
<div class="a3">softcodeon.com!</div>
<style> 
div.a1 {
  width: 150px;
  height: 80px;
  background-color: cyan;
  -ms-transform: rotate(30deg); /* IE 9 */
  transform: rotate(30deg);
}
div.a2 {
  width: 150px;
  height: 80px;
  background-color: cyan;
  -ms-transform: skewY(30deg); /* IE 9 */
  transform: skewY(30deg);
}
div.a3 {
  width: 150px;
  height: 80px;
  background-color: cyan;
  -ms-transform: scaleY(2.5); /* IE 9 */
  transform: scaleY(2.5);
}
</style>

Conclusion: 

CSS transform property is used to rotating, skewing, scaling, translating, and matrix the HTML elements. Each functionality we have different functions like rotate(), skew(), scale() and matrix() etc.

Have a nice day.