1
00:00:00,000 --> 00:00:05,115
[MUSIC]

2
00:00:05,115 --> 00:00:08,166
CSS transforms give us
different ways to size,

3
00:00:08,166 --> 00:00:12,300
position, and
change the appearance of HTML elements.

4
00:00:12,300 --> 00:00:17,857
With transforms we can visually manipulate
content by rotating, scaling, skewing,

5
00:00:17,857 --> 00:00:22,830
and moving elements in two-dimensional or
even three-dimensional space.

6
00:00:22,830 --> 00:00:28,370
All CSS transformations happen via
a single property, the transform property.

7
00:00:28,370 --> 00:00:33,620
So any transform you want on your
page needs to be written as a value

8
00:00:33,620 --> 00:00:37,940
of the transform property using one or
several transform functions.

9
00:00:37,940 --> 00:00:41,290
So, this page lists all of
the transformation functions

10
00:00:41,290 --> 00:00:43,300
the transform property accepts.

11
00:00:43,300 --> 00:00:47,340
As you can see there are many
types of css transforms,

12
00:00:47,340 --> 00:00:50,290
each performing a different visual effect.

13
00:00:50,290 --> 00:00:55,000
So, in this section I'm going to
cover 2-d transform functions that

14
00:00:55,000 --> 00:01:00,480
transform elements on the x and
y access like rotate,

15
00:01:00,480 --> 00:01:03,940
scale, skew, and translate.

16
00:01:03,940 --> 00:01:08,840
With these transform functions we can
add pretty neat visual enhancements to

17
00:01:08,840 --> 00:01:13,460
our photo gallery like
the effects you're seeing here.

18
00:01:13,460 --> 00:01:17,770
And in later videos you'll learn
about other functions that simulate

19
00:01:17,770 --> 00:01:19,730
three dimensional effects.

20
00:01:19,730 --> 00:01:23,370
You can follow along using the latest
workspace by launching the workspace on

21
00:01:23,370 --> 00:01:27,250
this page, or download the file to
follow along with your own text editor.

22
00:01:27,250 --> 00:01:31,050
So in this section we're going
to be working with nine images

23
00:01:31,050 --> 00:01:36,320
in our photo gallery, and as you can
see here in the wide view port range,

24
00:01:36,320 --> 00:01:38,730
the images split up into three rows.

25
00:01:40,140 --> 00:01:44,550
So first, I want to add
a small rotation to my images.

26
00:01:44,550 --> 00:01:47,340
To do this, I can use the rotate function.

27
00:01:49,650 --> 00:01:53,130
I'll open up the file interactions.css and

28
00:01:53,130 --> 00:01:57,605
scroll down to the image transforms and
transitions section.

29
00:01:57,605 --> 00:02:03,440
And right below the comment for
row one I'll create a rule that targets

30
00:02:03,440 --> 00:02:09,320
my images, then add the transform property

31
00:02:09,320 --> 00:02:13,340
and as its value I'm going to
define the rotate function.

32
00:02:16,480 --> 00:02:21,670
So rotate is a 2-D function you
can use to rotate an element

33
00:02:21,670 --> 00:02:26,890
from zero to 360 degrees,
clockwise or counter-clockwise.

34
00:02:26,890 --> 00:02:29,230
And inside the parentheses,

35
00:02:29,230 --> 00:02:34,710
the rotate function accepts arguments
in various types of angle units.

36
00:02:34,710 --> 00:02:39,700
Such as degrees, gradients,
radians, and turns but

37
00:02:39,700 --> 00:02:44,590
the most common unit developers use for
rotations is the degree unit.

38
00:02:45,610 --> 00:02:51,380
The degree unit moves an element in
a circular motion up to 360 degrees.

39
00:02:51,380 --> 00:02:57,550
So, for example,
if I use a value of 25 degrees or

40
00:02:57,550 --> 00:03:03,540
Deg, once we refresh the browser
notice how the value 25 degrees

41
00:03:03,540 --> 00:03:08,840
rotates an image clockwise 25
degrees from its center position.

42
00:03:10,970 --> 00:03:15,070
Now if I go back and
change the value to let's say 90 degrees,

43
00:03:16,910 --> 00:03:20,210
this rotates an image 90 degrees and

44
00:03:20,210 --> 00:03:25,450
a value 180 degrees is half a rotation.

45
00:03:25,450 --> 00:03:31,740
So the image is turned upside down and
360 degrees is one complete rotation.

46
00:03:36,360 --> 00:03:41,064
Now to rotate my images counterclockwise,
or in the opposite direction,

47
00:03:41,064 --> 00:03:43,060
I can use a negative value.

48
00:03:43,060 --> 00:03:47,279
So, for example, the value -45 degrees

49
00:03:47,279 --> 00:03:52,130
rotates the images
counterclockwise 45 degrees.

50
00:03:53,170 --> 00:03:58,720
And -90 degrees will rotate it
counterclockwise by 90 degrees and so on.

51
00:03:59,810 --> 00:04:02,760
You'll notice how
the rotations do not affect

52
00:04:02,760 --> 00:04:05,590
the position of other adjacent elements.

53
00:04:05,590 --> 00:04:10,080
That's because CSS transforms do not
affect the normal document float.

54
00:04:10,080 --> 00:04:15,050
That is the normal way elements will
display as they're written in the HTML.

55
00:04:15,050 --> 00:04:19,380
So anytime you apply a transformation
to an element the original

56
00:04:19,380 --> 00:04:23,530
space occupied by that element
is preserved by the browser.

57
00:04:23,530 --> 00:04:29,910
Now, you may see elements appear on top of
other content, like you're seeing here.

58
00:04:29,910 --> 00:04:33,430
But the new positions
created by the rotation

59
00:04:33,430 --> 00:04:36,150
doesn't actually affect
the surrounding content.