[MUSIC]

CSS transforms give us different ways to size,

position, and change the appearance of HTML elements.

With transforms we can visually manipulate content by rotating, scaling, skewing,

and moving elements in two-dimensional or even three-dimensional space.

All CSS transformations happen via a single property, the transform property.

So any transform you want on your page needs to be written as a value

of the transform property using one or several transform functions.

So, this page lists all of the transformation functions

the transform property accepts.

As you can see there are many types of css transforms,

each performing a different visual effect.

So, in this section I'm going to cover 2-d transform functions that

transform elements on the x and y access like rotate,

scale, skew, and translate.

With these transform functions we can add pretty neat visual enhancements to

our photo gallery like the effects you're seeing here.

And in later videos you'll learn about other functions that simulate

three dimensional effects.

You can follow along using the latest workspace by launching the workspace on

this page, or download the file to follow along with your own text editor.

So in this section we're going to be working with nine images

in our photo gallery, and as you can see here in the wide view port range,

the images split up into three rows.

So first, I want to add a small rotation to my images.

To do this, I can use the rotate function.

I'll open up the file interactions.css and

scroll down to the image transforms and transitions section.

And right below the comment for row one I'll create a rule that targets

my images, then add the transform property

and as its value I'm going to define the rotate function.

So rotate is a 2-D function you can use to rotate an element

from zero to 360 degrees, clockwise or counter-clockwise.

And inside the parentheses,

the rotate function accepts arguments in various types of angle units.

Such as degrees, gradients, radians, and turns but

the most common unit developers use for rotations is the degree unit.

The degree unit moves an element in a circular motion up to 360 degrees.

So, for example, if I use a value of 25 degrees or

Deg, once we refresh the browser notice how the value 25 degrees

rotates an image clockwise 25 degrees from its center position.

Now if I go back and change the value to let's say 90 degrees,

this rotates an image 90 degrees and

a value 180 degrees is half a rotation.

So the image is turned upside down and 360 degrees is one complete rotation.

Now to rotate my images counterclockwise, or in the opposite direction,

I can use a negative value.

So, for example, the value -45 degrees

rotates the images counterclockwise 45 degrees.

And -90 degrees will rotate it counterclockwise by 90 degrees and so on.

You'll notice how the rotations do not affect

the position of other adjacent elements.

That's because CSS transforms do not affect the normal document float.

That is the normal way elements will display as they're written in the HTML.

So anytime you apply a transformation to an element the original

space occupied by that element is preserved by the browser.

Now, you may see elements appear on top of other content, like you're seeing here.

But the new positions created by the rotation

doesn't actually affect the surrounding content.