1 00:00:00,280 --> 00:00:05,380 In this video you'll learn how you can use the skew function to distort elements 2 00:00:05,380 --> 00:00:11,570 on the horizontal left to right axis and on the vertical up and down axis. 3 00:00:11,570 --> 00:00:16,770 So when you skew an element, it gives the transformed element a slanted or 4 00:00:16,770 --> 00:00:19,620 twisted appearance like in this example. 5 00:00:19,620 --> 00:00:23,166 So notice how the div on the left tilts horizontally and 6 00:00:23,166 --> 00:00:26,184 the div on the right is distorted vertically. 7 00:00:28,558 --> 00:00:36,810 So I can apply a horizontal skew to any element with the skewX transform option. 8 00:00:36,810 --> 00:00:42,910 So let's see what applying a skew to the images here on Hover looks like. 9 00:00:42,910 --> 00:00:47,160 Back in my style sheet, I'm going to replace the rotate function 10 00:00:48,490 --> 00:00:54,230 with the skewX function and set the value to 10 degrees. 11 00:00:56,290 --> 00:00:59,450 When I refresh the browser and hover over an image, 12 00:00:59,450 --> 00:01:03,430 notice how the skewX function slants an image 13 00:01:03,430 --> 00:01:08,110 ten degrees from the center of its original position on the x axis. 14 00:01:08,110 --> 00:01:13,364 You'll notice how the top sides of the images slant to the left by ten degrees, 15 00:01:13,364 --> 00:01:16,239 while the bottom side slants to the right. 16 00:01:19,219 --> 00:01:23,500 Now a negative value will skew the content in the opposite direction. 17 00:01:23,500 --> 00:01:31,313 So the value -10 reverses the skew direction we saw earlier. 18 00:01:33,995 --> 00:01:40,130 And if I change the function from skewX to skewY. 19 00:01:42,850 --> 00:01:47,930 Now it tilts an image negative ten degrees on the y axis. 20 00:01:47,930 --> 00:01:53,220 So notice how a negative value sort of pulls the top right and 21 00:01:53,220 --> 00:01:56,110 bottom left corners in the opposite directions. 22 00:01:56,110 --> 00:01:59,744 So the images stretch and tilt up from the top right corner. 23 00:02:02,899 --> 00:02:05,920 Now, a positive value creates the opposite effect. 24 00:02:05,920 --> 00:02:10,607 So for example, the value 10 degrees skews the images in 25 00:02:10,607 --> 00:02:13,676 the opposite direction on the y axis. 26 00:02:17,420 --> 00:02:20,235 The skew function, like other transform functions, 27 00:02:20,235 --> 00:02:23,270 will transform all the children of an element. 28 00:02:23,270 --> 00:02:29,700 So if I go back to my style sheet and target the main content div 29 00:02:32,160 --> 00:02:37,310 and apply a skew on the x axis with skewX. 30 00:02:38,410 --> 00:02:41,750 And set the value to say, 15 degrees. 31 00:02:42,970 --> 00:02:46,650 Notice how it skews all the content on the page. 32 00:02:46,650 --> 00:02:51,424 Now you probably wouldn't want to use skewX for something like this, but 33 00:02:51,424 --> 00:02:56,980 skewing elements here and there can make your layouts more playful and interesting. 34 00:03:00,242 --> 00:03:04,845 For example, the Front-End Design Conference website lays out its 35 00:03:04,845 --> 00:03:09,220 content in a clever and creative way, using the skew X function. 36 00:03:10,410 --> 00:03:15,500 So if you inspect the red div elements using the Chrome DevTools. 37 00:03:15,500 --> 00:03:19,990 You'll see that a skewX of 15 degrees 38 00:03:19,990 --> 00:03:24,780 has been applied to the top and bottom div. 39 00:03:24,780 --> 00:03:28,840 And the center div is skewed in the opposite direction 40 00:03:28,840 --> 00:03:32,490 with a skew x of negative 15 degrees. 41 00:03:32,490 --> 00:03:36,856 So this is an excellent real world example of skew being used on a website. 42 00:03:36,856 --> 00:03:40,490 So go ahead and experiment with the different skew functions and 43 00:03:40,490 --> 00:03:43,440 values and in the next video you're going to learn 44 00:03:43,440 --> 00:03:47,470 how to scale the size of your content using the scale transform function.