KandZ – Tuts

We like to help…!

CSS 51 💻 transform skew, skewX, skewY

a - transform skew
transform skew skews and an element on 2D
It distorts and element along X or Y axis
values (x,y) → deg (degrees) 30deg,
grad (gradians) 100grad, rad (radians) 0.5rad
turn (turns)0.25 turn
if only x is provided then skews on x
transform: skewX(30deg); → Skews along the X axis by 30 degrees
transform: skew(0.05turn, 0.05turn); → skews along both axis
transform: skew(10grad); → Skews along the X axis by 10grad

b - transform skewX and skewY
transform skewX and skewY is alternative to skew
skewW skews along X axis
skewY skews along Y axis
transform: skewX(30deg); → Skew along the X-axis by 30 degrees
transform: skewY(20deg); → Skew along the Y-axis by 20 degrees
transform: skewX(30deg) skewY(20deg); → Combine both skews

Leave a Reply