Skew Elements in 2D with the transform CSS Property
The transform property in CSS gives you the ability to transform elements in 2D or 3D. The most common transforms used to change elements are rotate, skew, translate, and scale.
In this video we will look at skew.
This property skews an element on the 2D plane.
There is a shorthand that uses either one value or two.
You can also write out specifically if you want to skew on the X or Y axis.
The skew property tilts the element either to the right or the left
Christina Gorton: [0:00] Another property we can use on the transform is skew. Skew, you can skew with two numbers, the X and the Y-axis. This is with degrees. The X-axis goes left to right, and the Y-axis goes up and down.
[0:19] If we did two numbers, -10 degrees and say 20 degrees. We will refresh this and we're going to see it tilted. It's going to tilt left or right depending on what you're giving it. It's easier to see when you do one or the other.
[0:36] We can skewX, and let's give this, let's do 20 degrees, refresh, we're going to see it's tilted now. If we did that on the Y-axis, 20 degrees, it should tilt the other way. Giving it a negative number, works as well. We can refresh and see it tilted again the other way.