WEBVTT

1
00:00:00.000 --> 00:00:01.870
So, the transform functions we apply move
elements according to the center point.

2
00:00:01.870 --> 00:00:07.300
For example, when you apply a rotation to
an image, the image rotates around it's

3
00:00:07.300 --> 00:00:14.330
center by default and if you scale the
image, it scales evenly from it's center.

4
00:00:14.330 --> 00:00:18.400
But, we can modify the spot at
which the element is scaled or

5
00:00:18.400 --> 00:00:23.690
rotated by setting what's called
the default origin of the transformation.

6
00:00:23.690 --> 00:00:26.740
You do this with the transform
origin property.

7
00:00:27.750 --> 00:00:30.000
To help you see how this works,
I've wrapped the top three images