Changing the Transform Position with transform-origin

The default transform origin of an HTML element is it's center. 0:00 So, the transform functions we apply move elements according to the center point. 0:04 For example, when you apply a rotation to an image, the image rotates around it's 0:10 center by default and if you scale the image, it scales evenly from it's center. 0:16 But, we can modify the spot at which the element is scaled or 0:23 rotated by setting what's called the default origin of the transformation. 0:27 You do this with the transform origin property. 0:32 To help you see how this works, I've wrapped the top three images 0:36 in a span and gave the span a light gray background color. 0:41 That way, we can compare the transformed images with their 0:46 original position on the page as we modify their transformed origin. 0:49 You can launch the latest workspace on this page to see these changes, 0:53 or you can keep following along with your previous workspace. 0:57 Transform origin is a separate CSS property, so 1:02 you add it to the element we're transforming. 1:05 So, back in my style sheet, I'm gonna change the transform origin of my images 1:09 by adding it right here in the image rule, so I'll say transform-origin. 1:14 Now, the default value for transform origin is 50%, 50%, 1:21 which sets the origin at 50% horizontally and at 50% vertically. 1:26 So, as you just learned, this will always be the exact center of the element. 1:33 So, let's say I don't wanna scale my images from their center point. 1:38 Well, I can easily change the origin using a length unit, 1:41 percentage or a position keyword. 1:45 So back in my image rule, I'll change the transform origin value to 0, 0. 1:48 The value 0, 0 moves the origin to the elements top left corner. 1:54 So, now the images no longer scale from their center. 2:00 As you can see, they sort of shift a little to the right as they're scaling. 2:05 And the change in origin is more apparent when applying a rotation. 2:13 So for instance, I'll go back to my image hover rule. 2:18 And it changed the transform from scale to rotate, and 2:23 let's set the value to 45 degrees. 2:28 When I refresh the browser and hover over an image, the light grey area shows 2:32 the original position of the images, so instead of rotating around their center, 2:38 the images used their top left corner as a rotation point. 2:43 So, now the transforms behave differently. 2:48 The images sort of swing from the top left origin. 2:51 And we can really see the change in origin if we 2:58 set the rotation to a larger value like 360 degrees. 3:01 The transform origin value 0, 3:11 0 is the same as the value top left. 3:15 And if we go back and set the value to bottom right. 3:25 This will shift the transform origin to the bottom right corner of an image. 3:31 So, now the images swings around their bottom right corner, 3:38 and percentages the value bottom right is equivalent to the value 100%. 3:43 100% because it positions the origin at the farthest point on the x axis and 3:49 the furthest point on the y axis. 3:54 We can also define more specific transform origins using pixel values. 4:01 In another course, you'll learn how pixel values and 4:05 transform origin come in handy when transforming SVGs. 4:08 I've linked to that course in the teacher notes for this video. 4:12 Now you'll probably use the default transform origin most of the time, but 4:15 I'll show you how you can use transform origin to enhance the image gallery and 4:20 make the scaling a little more interesting, like this. 4:24 But first, 4:31 I'm gonna remove the transform-origin declaration from my image rule. 4:32 And I'm gonna set the rotate value back to negative 5 degrees. 4:38 So, now in the second row of images, the image and 4:48 photo-overlay are nested inside a div with the class photo. 4:52 And as you can see in main.ess, the phot.div overflow is set to hidden. 4:58 So, this hides any content that extends beyond the div. 5:06 So, I wanna scale the size of these three images 5:11 when a user hovers over that photo div. 5:14 So, back inside interactions.css, I'll scroll down to the row 2 comment. 5:20 And I'll create a new rule that targets an image inside photo on hover. 5:28 [SOUND] I'll add the transform property and 5:34 I want to scale the images 1.2 times the original size. 5:39 So, I will use the scale function and set the value to 1.2. 5:46 When we refresh the browser and hover over one of these images, 5:53 we can see that the overflow on that photo div creates this awesome 5:58 zooming in effect behind the overlay because the photo div hides 6:03 the parts of the image that scale beyond its boundaries. 6:08 So now, I can take this effect a little further by 6:14 changing the transform origin of the image. 6:17 This will shift the scaling perspective within that photo div. 6:21 So, back in my style sheet, I'm going to target the images inside the photo div. 6:24 I'll add the transform origin property and set the origin to 0, 0. 6:34 Remember this is the top left corner of the image. 6:41 Back in the browser when we hover over an image, 6:45 notice how the change in origin adds a nice touch to the scaling movement. 6:48 The images appear to be slightly zooming in towards us from the top left sides. 6:54 Nice. 6:59