- Rotating Elements 4:37
- Animating a CSS Transform 4:22
- Skewing Content 3:48
- Scaling Elements 3:12
- Changing the Transform Position with transform-origin 7:01
- Moving Content with translate() 4:55
- Creating a Slide Transition 5:39
- Combining Transforms 3:36
- CSS Transforms Challenge 2 objectives
- Custom Timing Functions with cubic-bezier() 6:43
- Review: Getting Started with CSS Transforms 7 questions
Preview
Video Player
00:00
00:00
Skewing Content
3:48When 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