CSS3 - 2d transform
CSS3 - 2d transform
CSS3-2d feature enables to rearrange an element as rotating (positive and negative angle in degree), skew in X-axis & Y-axis, and matrix transformation.
Rotate (angle in degree): as per angle in degree (positive/negative), the element is rotated by left-to-right (positive degree) and right-to-left (negative degree).
skewX(angle in degree): it is defined to skew transforms along with X axis.
skewY(angle in degree): it is defined to skew transforms along with Y axis.
Marix (n1,n2,n3,n4,n5,n6): it is defined for matrix transformation with six values.
Example:
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#test {
transform: rotate(30deg);
}
div#test1 {
transform: rotate(-25deg);
}
div#test2 {
transform: skewX(20deg);
}
div#test3 {
transform: skewY(20deg);
}
div#test4 {
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
CSS3-2D transform.-Original
</div>
<div id = "test">
CSS-2D transform.-rotation by 30 degree.
</div>
<div id = "test1">
CSS-2D transform.-rotation by -25 degree.
</div>
<div id = "test2">
CSS-Skew X axis by 20 degree.
</div>
<div id = "test3">
CSS-Skew Y axis by 20 degree.
</div>
<div id = "test4">
CSS-Matrix transform.
</div>
</body>
</html>
Output:
