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
Values |
Description |
matrix(n,n,n,n,n,n) |
Used to defines matrix transforms with six values |
translate(x,y) |
Used to transforms the element along with x-axis and y-axis |
translateX(n) |
Used to transforms the element along with x-axis |
translateY(n) |
Used to transforms the element along with y-axis |
scale(x,y) |
Used to change the width and height of element |
scaleX(n) |
Used to change the width of element |
scaleY(n) |
Used to change the height of element |
rotate(angle) |
Used to rotate the element based on an angle |
skewX(angle) |
Used to defines skew transforms along with x axis |
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
<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>
Rotate -20 degrees
Box rotation with -20 degrees angle as shown below
<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>
Skew X axis
Box rotation with skew x-axis as shown below
<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>
Skew Y axis
Box rotation with skew y-axis as shown below
<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>
Matrix transform
Box rotation with Matrix transforms as shown below
<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>
Matrix transforms with another direction
<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>