Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Transitions and Transforms

Well done!

You have completed CSS Transitions and Transforms!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Skewing Content

3:48 with Guil Hernandez

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.

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