Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
When you skew an element, it gives the transformed element a slanted appearance. In this video, you'll learn how to use skew functions to distort elements horizontally and vertically.
Resources
Video review

skewX()
applies a horizontal skew to an element. 
skewY()
applies a vertical skew to an element.  A negative value skews the content in the opposite direction.
 The skew functions, like other transform functions, will transform all the children of an element.

0:00
In this video you'll learn how you can use the skew function to distort elements

0:05
on the horizontal left to right axis and on the vertical up and down axis.

0:11
So when you skew an element, it gives the transformed element a slanted or

0:16
twisted appearance like in this example.

0:19
So notice how the div on the left tilts horizontally and

0:23
the div on the right is distorted vertically.

0:28
So I can apply a horizontal skew to any element with the skewX transform option.

0:36
So let's see what applying a skew to the images here on Hover looks like.

0:42
Back in my style sheet, I'm going to replace the rotate function

0:48
with the skewX function and set the value to 10 degrees.

0:56
When I refresh the browser and hover over an image,

0:59
notice how the skewX function slants an image

1:03
ten degrees from the center of its original position on the x axis.

1:08
You'll notice how the top sides of the images slant to the left by ten degrees,

1:13
while the bottom side slants to the right.

1:19
Now a negative value will skew the content in the opposite direction.

1:23
So the value 10 reverses the skew direction we saw earlier.

1:33
And if I change the function from skewX to skewY.

1:42
Now it tilts an image negative ten degrees on the y axis.

1:47
So notice how a negative value sort of pulls the top right and

1:53
bottom left corners in the opposite directions.

1:56
So the images stretch and tilt up from the top right corner.

2:02
Now, a positive value creates the opposite effect.

2:05
So for example, the value 10 degrees skews the images in

2:10
the opposite direction on the y axis.

2:17
The skew function, like other transform functions,

2:20
will transform all the children of an element.

2:23
So if I go back to my style sheet and target the main content div

2:32
and apply a skew on the x axis with skewX.

2:38
And set the value to say, 15 degrees.

2:42
Notice how it skews all the content on the page.

2:46
Now you probably wouldn't want to use skewX for something like this, but

2:51
skewing elements here and there can make your layouts more playful and interesting.

3:00
For example, the FrontEnd Design Conference website lays out its

3:04
content in a clever and creative way, using the skew X function.

3:10
So if you inspect the red div elements using the Chrome DevTools.

3:15
You'll see that a skewX of 15 degrees

3:19
has been applied to the top and bottom div.

3:24
And the center div is skewed in the opposite direction

3:28
with a skew x of negative 15 degrees.

3:32
So this is an excellent real world example of skew being used on a website.

3:36
So go ahead and experiment with the different skew functions and

3:40
values and in the next video you're going to learn

3:43
how to scale the size of your content using the scale transform function.
You need to sign up for Treehouse in order to download course files.
Sign up