CSS3 2D Transforms: Skew Property

Here is the brief description of how to skew a 2D element in CSS3 along the X and Y axis by the given angles using the CSS3 matrix() method.

Explanation

Property :

skew()

Usage:


transform: skew(20deg, 10deg);
transform: skewX(20deg);
transform: skewY(20deg);

Definition:

The skew() method skews an element along the X and Y axis by the given angle.

Example 1 :
This example skews the <div> element 20 degrees along the X-axis
<style>
.demodiv{
width: 250px;
height: 50px;
background-color: #9AFE2E;
border: 1px solid black;
transform: skewX(20deg);
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
}
</style>
<br> <div class='demodiv'>
This is an example for 2D Transform SkewX() property.
</div>

Result:

This is an example for 2D Transform SkewX() property.


Example 2 :
This example skews the <div> element 20 degrees along the Y-axis
<style>
.demodiv1{
width: 250px;
height: 50px;
background-color: #9AFE2E;
border: 1px solid black;
transform: skewY(20deg);
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
}
</style>
<br> <div class='demodiv1'>
This is an example for 2D Transform SkewY() property.
</div>

Result:

This is an example for 2D Transform SkewY() property.


Example 3 :
This example skews the <div> element 20 degrees along the X-axis and 10 degrees along Y-axis
<style>
.demodiv2{
width: 250px;
height: 50px;
background-color: #9AFE2E;
border: 1px solid black;
transform: skew(20deg, 10deg);
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
}
</style>
<br> <div class='demodiv2'>
This is an example for 2D Transform Skew() property.
</div>

Result:

This is an example for 2D Transform Skew() property.



Ask Questions

Ask Question