In the last article, we learned what the CSS transforms are and also started learning 2D transforms. Following are some of the commonly used 2D transformations:
The parameters are as follow:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
That's all for today. In the next article, we will start learning 3D transform properties. Till then #keepCoding.
- translate()
- rotate()
- scale()
- skewX()
- skewY()
- matrix()
Previously we learned about first 3 of them. Let's complete remaining today.
The skewX() method
The skewX() method allows skewing an element along the X-axis by the given angle input.
The given code will skew the element 30 degrees along X-axis:
The skewY() method
The skewY() method allows skewing an element along the Y-axis by the given angle input.
The given code will skew the element 30 degrees along Y-axis:
The skew() method
Although I didn't mention it in a list, it is just combination of above two methods. It takes two arguments and skews the element in X and Y directions according to each parameter respectively.
div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
The matrix() method
The matrix()method is shorthand for all the 2D transform properties. It takes six parameters which allow to rotate, scale, move and skew (RSMS)elements respectively.The parameters are as follow:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
