Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this video you'll learn how you can
use the skew function to distort elements
0:00
on the horizontal left to right axis and
on the vertical up and down axis.
0:05
So when you skew an element, it gives
the transformed element a slanted or
0:11
twisted appearance like in this example.
0:16
So notice how the div on
the left tilts horizontally and
0:19
the div on the right is
distorted vertically.
0:23
So I can apply a horizontal skew to any
element with the skewX transform option.
0:28
So let's see what applying a skew to
the images here on Hover looks like.
0:36
Back in my style sheet,
I'm going to replace the rotate function
0:42
with the skewX function and
set the value to 10 degrees.
0:48
When I refresh the browser and
hover over an image,
0:56
notice how the skewX
function slants an image
0:59
ten degrees from the center of its
original position on the x axis.
1:03
You'll notice how the top sides of the
images slant to the left by ten degrees,
1:08
while the bottom side slants to the right.
1:13
Now a negative value will skew
the content in the opposite direction.
1:19
So the value -10 reverses the skew
direction we saw earlier.
1:23
And if I change the function
from skewX to skewY.
1:33
Now it tilts an image negative
ten degrees on the y axis.
1:42
So notice how a negative value
sort of pulls the top right and
1:47
bottom left corners in
the opposite directions.
1:53
So the images stretch and
tilt up from the top right corner.
1:56
Now, a positive value
creates the opposite effect.
2:02
So for example,
the value 10 degrees skews the images in
2:05
the opposite direction on the y axis.
2:10
The skew function,
like other transform functions,
2:17
will transform all
the children of an element.
2:20
So if I go back to my style sheet and
target the main content div
2:23
and apply a skew on the x axis with skewX.
2:32
And set the value to say, 15 degrees.
2:38
Notice how it skews all
the content on the page.
2:42
Now you probably wouldn't want to use
skewX for something like this, but
2:46
skewing elements here and there can make
your layouts more playful and interesting.
2:51
For example, the Front-End Design
Conference website lays out its
3:00
content in a clever and creative way,
using the skew X function.
3:04
So if you inspect the red div
elements using the Chrome DevTools.
3:10
You'll see that a skewX of 15 degrees
3:15
has been applied to the top and
bottom div.
3:19
And the center div is skewed
in the opposite direction
3:24
with a skew x of negative 15 degrees.
3:28
So this is an excellent real world
example of skew being used on a website.
3:32
So go ahead and experiment with
the different skew functions and
3:36
values and
in the next video you're going to learn
3:40
how to scale the size of your content
using the scale transform function.
3:43
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up