2D Transform Functions in CSS

https://www.tutorialspoint.com/2d-transform-functions-in-css

13-09-2020
|

Question

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>

Output

The above code will produce the following output −

AmitDiwan

Published on 12-May-2020 13:07:53

Previous Page Print Page