Loading lesson path
Formula
The skewX() function skews an element along the X - axis by the given angle.
The following example skews the < div > element 20 degrees along the X - axis:Example div {
transform: skewX(20deg);
}Formula
The skewY() function skews an element along the Y - axis by the given angle.
The following example skews the < div > element 20 degrees along the Y - axis:Example div {
transform: skewY(20deg);
}Formula
The skew() function skews an element along the X and Y - axis by the given angles.
The following example skews the < div > element 20 degrees along the X - axis, and 10 degrees along the Y - axis:Example div {
transform: skew(20deg, 10deg);
}If the second parameter is not specified, it has a zero value. So, the following example skews the <div> element 20 degrees along the X-axis:
Example div {
transform: skew(20deg);
}The matrix() function combines all the 2D transform functions into one. The matrix() function take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements. The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Example div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}The following table lists all the 2D transform properties:
Formula
Applies a 2D or 3D transformation to an element transform - originAllows you to change the position on transformed elements
Defines a 2D transformation, using a matrix of six values translate()
Formula
Defines a 2D translation, moving the element along the X - and the Y - axis translateX()
Defines a 2D translation, moving the element along the X - axis translateY()
Defines a 2D translation, moving the element along the Y - axis scale()Defines a 2D scale transformation, scaling the elements width and height scaleX() Defines a 2D scale transformation, scaling the element's width scaleY() Defines a 2D scale transformation, scaling the element's height rotate() Defines a 2D rotation, the angle is specified in the parameter skew()
Formula
Defines a 2D skew transformation along the X - and the Y - axis skewX()
Defines a 2D skew transformation along the X - axis skewY()
Defines a 2D skew transformation along the Y - axis