CSS3 - 2d Transforms
2D transforms are used to re-change the element structure as translate, rotate, scale, and skew.
The following table has contained common values which are used in 2D transforms −
| Sr.No. | Value & Description |
|---|---|
| 1 | matrix(n,n,n,n,n,n) Used to defines matrix transforms with six values |
| 2 | translate(x,y) Used to transforms the element along with x-axis and y-axis |
| 3 | translateX(n) Used to transforms the element along with x-axis |
| 4 | translateY(n) Used to transforms the element along with y-axis |
| 5 | scale(x,y) Used to change the width and height of element |
| 6 | scaleX(n) Used to change the width of element |
| 7 | scaleY(n) Used to change the height of element |
| 8 | rotate(angle) Used to rotate the element based on an angle |
| 9 | skewX(angle) Used to defines skew transforms along with x axis |
| 10 | skewY(angle) Used to defines skew transforms along with y axis |
The following examples are shown the sample of all above properties.
Rotate 20 degrees
Box rotation with 20 degrees angle as shown below −
Live Demo
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>
It will produce the following result −
Rotate -20 degrees
Box rotation with -20 degrees angle as shown below −
Live Demo
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>
It will produce the following result −
Skew X axis
Box rotation with skew x-axis as shown below −
Live Demo
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>
It will produce the following result −
Skew Y axis
Box rotation with skew y-axis as shown below −
Live Demo
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>
It will produce the following result −
Matrix transform
Box rotation with Matrix transforms as shown below −
Live Demo
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>
It will produce the following result −
Matrix transforms with another direction.
Live Demo
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>
It will produce the following result −
