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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up