2D Transform Functions in CSS

CSS Web Development Front End Technology

The 2D transform functions are used to apply 2D transformations which could be rotate, move, scale and skew to an element.

Translate − To move an element along x and y axis.
Scale − To resize the element in x y direction.
Rotate − To move the element around by some degree.
Skew − To slant an element along x y direction.

Following is the code showing the 2D transform functions in CSS −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 100px;
   height: 100px;
   background-color: rgb(255, 0, 128);
   border:2px solid rgb(0, 35, 150);
   margin: 20px;
   display: inline-block;
   color: white;
}
.rotate {
   transform: rotate(20deg);
}
.translate {
   transform: translate(30px, 20px);
}
.scale {
   transform: scale(2, 1);
   margin-left:70px;
}
.skew {
   transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transform functions example</h1>
<div class="rotate">ROTATE()</div>
<div class="skew">SKEW()</div>
<div class="scale">SCALE()</div>
<div class="translate">TRANSLATE()</div>
</body>
</html>