Skewing Content3: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.
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.
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 up