Using CSS3 property transform, elements can be translated, rotated, scaled and skewed in two or three dimensional space. This tutorial will covered skewing an element using CSS transform (2D) skew, skewX, skewY. Also note that when an element is skewed, it does not impact the placement of other elements in layout and may end up some gaps/overlap with other elements.
CSS Syntax:
transform:skew(ax, ay); transform:skewX(ax); transform:skewY(ay);
Example – transform skew()
Skew 10 degree along both X and Y axis.
<style type="text/css">
.outer {
width: 200px; height:100px; background-color:lightgray;
}
.box1 {
width: 100px; height:50px; background-color:green;
transform: skew(10deg, 10deg);
}
.box2 {
width: 100px; height:50px; background-color:lightblue;
}
</style>
<div class="outer">
<div class="box1">skew(10deg, 10deg)</div>
<div class="box2">normal</div>
</div>Example – transform skewX
Skew 10 degree along both X axis. Note that skewX(10deg) is equivalent to skew(10deg, 0).
<style type="text/css">
.outer {
width: 200px; height:100px; background-color:lightgray;
}
.box1 {
width: 100px; height:50px; background-color:green;
transform: skewX(10deg);
}
.box2 {
width: 100px; height:50px; background-color:lightblue;
}
</style>
<div class="outer">
<div class="box1">skewX(10deg)</div>
<div class="box2">normal</div>
</div>Example – transform skewY
Skew 10 degree along both Y axis. Note that skewY(10deg) is equivalent to skew(0, 10deg)
<style type="text/css">
.outer {
width: 200px; height:100px; background-color:lightgray;
}
.box1 {
width: 100px; height:50px; background-color:green;
transform: skewY(10deg);
}
.box2 {
width: 100px; height:50px; background-color:lightblue;
}
</style>
<div class="outer">
<div class="box1">skewY(10deg)</div>
<div class="box2">normal</div>
</div>Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| CSS3 2D Transforms | W3C Working Draft | CSS3 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 36+ | Yes 16+ | Yes 10+ | Yes 12+ | Yes 9+ | Yes 12.1+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 9.0-9.2+ | Yes 10+ | Yes 11+ |
source: caniuse.com
