WDS79 - Transform Your CSS(Part 2)

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:

• 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);
}

That's all for today. In the next article, we will start learning 3D transform properties. Till then #keepCoding.