Scaling Elements3:12 with Guil Hernandez
One of the most common CSS transformations is scaling. You can increase or decrease the size of elements using scale functions like scaleX(), scaleY(), and scale().
- To apply a basic scale transformation, define a number that instructs the browser how large to scale an element.
- The default value for
- To make an element twice as large, write
2as the value:
scale()value evenly scales an element both vertically and horizontally.
scale()accepts a second number value inside the parenthesis.
- Two values let you individually scale the horizontal and vertical dimensions; write the scaling value for X first, followed by the scaling value for Y.
- When scaling an image, make sure that the original dimensions of the image is larger than the size at which you're scaling the image.
One of the most commonly used CSS transformations is scale. 0:00 You can increase or decrease the size of elements on the x or y axis 0:04 using scale functions like scale X and scale Y. 0:09 But most of the time, you're going to use the scale shorthand function 0:15 to evenly scale elements horizontally and vertically. 0:20 Like in this example. 0:24 So notice how the div scales twice as large when we hover over it. 0:26 So first I want to scale the size of my images on hover. 0:33 I'll go back to interactions .css and scroll down to the image 0:37 hover rule here and I'll change the transform function to the scale function. 0:43 Now applying a basic skill transformation is pretty straight forward. 0:48 Inside the parenthesis you write a number that instructs the browser how large 0:53 the scale and element So the default value for scale is 1. 0:58 Which is equivalent to no scaling. 1:04 Now if I want to make the images twice as large I can write 2 as the scale value. 1:07 So now the images zoom out from the center without affecting the rest of the content. 1:15 They scale evenly both vertically and horizontally. 1:21 So their width and height are now twice as big. 1:24 Now a value like 1.5 will make the images 1.5 times larger on hover. 1:28 The scale function also accepts a second number value inside the parentheses. 1:38 Now, two values let you individually scale the horizontal and vertical dimensions. 1:44 You write the scaling value for x first, 1:50 followed by a comma, and then the scaling value for y. 1:54 So let's make the y value 2. 1:59 So once we refresh the browser and hover over an image, the first value of 2:02 1.5 scales the width of the images, while the second value of 2 scales the height. 2:08 So now unhovered, the images are 1.5 whiter and twice as tall. 2:14 Now when you apply a scale to an image you should make sure that the original 2:21 dimensions of the images is written in your HTML 2:26 are larger than the size at which you're going to scale them. 2:29 That way you can safely scale your images while maintaining their quality. 2:34 Now the best and most visually appealing solution for 2:38 my image gallery Is one small scale value like 1.1. 2:42 Much better, so as you've seen, the spot at which an element scales and 2:53 rotates is the exact same center of the element by default. 2:58 In the next video you'll learn how to change the spot to scale or 3:03 rotate elements from other areas, like the top-left corner or bottom-right corners. 3:07
You need to sign up for Treehouse in order to download course files.Sign up