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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!