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
The rotate() transform function rotates an element from 0 to 360 degrees clockwise or counterclockwise.
Resources
Video review
-
rotate()accepts arguments in various types of angle units. - The most common unit developers use for rotations is
deg. - A positive value rotates an element clockwise, while a negative value rotates an element counterclockwise.
- Rotations––and all transforms––do not affect the position of nearby elements.
- You may see parts of elements appear on top of other content, but the new positions created by the rotation does not affect surrounding content.
[MUSIC]
0:00
CSS transforms give us
different ways to size,
0:05
position, and
change the appearance of HTML elements.
0:08
With transforms we can visually manipulate
content by rotating, scaling, skewing,
0:12
and moving elements in two-dimensional or
even three-dimensional space.
0:17
All CSS transformations happen via
a single property, the transform property.
0:22
So any transform you want on your
page needs to be written as a value
0:28
of the transform property using one or
several transform functions.
0:33
So, this page lists all of
the transformation functions
0:37
the transform property accepts.
0:41
As you can see there are many
types of css transforms,
0:43
each performing a different visual effect.
0:47
So, in this section I'm going to
cover 2-d transform functions that
0:50
transform elements on the x and
y access like rotate,
0:55
scale, skew, and translate.
1:00
With these transform functions we can
add pretty neat visual enhancements to
1:03
our photo gallery like
the effects you're seeing here.
1:08
And in later videos you'll learn
about other functions that simulate
1:13
three dimensional effects.
1:17
You can follow along using the latest
workspace by launching the workspace on
1:19
this page, or download the file to
follow along with your own text editor.
1:23
So in this section we're going
to be working with nine images
1:27
in our photo gallery, and as you can
see here in the wide view port range,
1:31
the images split up into three rows.
1:36
So first, I want to add
a small rotation to my images.
1:40
To do this, I can use the rotate function.
1:44
I'll open up the file interactions.css and
1:49
scroll down to the image transforms and
transitions section.
1:53
And right below the comment for
row one I'll create a rule that targets
1:57
my images, then add the transform property
2:03
and as its value I'm going to
define the rotate function.
2:09
So rotate is a 2-D function you
can use to rotate an element
2:16
from zero to 360 degrees,
clockwise or counter-clockwise.
2:21
And inside the parentheses,
2:26
the rotate function accepts arguments
in various types of angle units.
2:29
Such as degrees, gradients,
radians, and turns but
2:34
the most common unit developers use for
rotations is the degree unit.
2:39
The degree unit moves an element in
a circular motion up to 360 degrees.
2:45
So, for example,
if I use a value of 25 degrees or
2:51
Deg, once we refresh the browser
notice how the value 25 degrees
2:57
rotates an image clockwise 25
degrees from its center position.
3:03
Now if I go back and
change the value to let's say 90 degrees,
3:10
this rotates an image 90 degrees and
3:16
a value 180 degrees is half a rotation.
3:20
So the image is turned upside down and
360 degrees is one complete rotation.
3:25
Now to rotate my images counterclockwise,
or in the opposite direction,
3:36
I can use a negative value.
3:41
So, for example, the value -45 degrees
3:43
rotates the images
counterclockwise 45 degrees.
3:47
And -90 degrees will rotate it
counterclockwise by 90 degrees and so on.
3:53
You'll notice how
the rotations do not affect
3:59
the position of other adjacent elements.
4:02
That's because CSS transforms do not
affect the normal document float.
4:05
That is the normal way elements will
display as they're written in the HTML.
4:10
So anytime you apply a transformation
to an element the original
4:15
space occupied by that element
is preserved by the browser.
4:19
Now, you may see elements appear on top of
other content, like you're seeing here.
4:23
But the new positions
created by the rotation
4:29
doesn't actually affect
the surrounding content.
4:33
You need to sign up for Treehouse in order to download course files.
Sign up