We can transform any HTML element using the transform property combined with CSS functions that scale, rotate, and even distort. These functions apply both 2D and 3D transformations to elements.
The scale() function resizes an element, both horizontally and vertically, on a 2D plane. It can take either one or two parameters. If only one argument is given, scale(2) for instance, then the element will grow proportionally on both the x and y-axis. When two arguments are provided, the first argument scales along the x-axis, and the second scales along the y-axis. If you only want to scale an element on one of the two axes, either the scaleX() or the scaleY() function can be used.
The rotate() function can be used for the transform property to rotate an element around a fixed point on a given 2D plane. The function accepts a single argument for the angle, which must be in degrees specified with the deg unit. Any positive angle means clockwise rotation, and a negative angle means counter-clockwise rotation. It is important to note that the origin of rotation defaults to the center of the element being rotated. For example, using rotate(180deg) as the value of transform property would rotate an element at its center, 180 degrees clockwise.
Lastly, the translate() function moves an element from its initial position to another position on the page specified as the function’s arguments. The function can accept either one or two arguments—if one argument is provided, then the function will translate the element along the only x-axis by the specified amount. If two arguments are given, the element translates along the x-axis by the amount specified by the first argument and along the y-axis by the amount specified as the second argument.
In the code example above, we wanted to shift the shifted element down the screen by 100px, so we used the transform property and set the translate() function as its value. The function’s x-axis argument was then set to be 0px and the y-axis to be 100px.
Instructions
Let’s see how the card’s background image will look with another layer of interactivity.
Back in the .card:hover .bg-image selector ruleset, add a transform property below the filter property. Set the value of the transform property to be the scale() function. For the function’s argument put a value of 1.4.
Let’s add a bit of interaction to the card’s title! Below the .header-modifier selector rules, create an empty ruleset for the .header-modifier:hover selector.
Inside of the newly created ruleset, add a transform property. Set the value of the property to be the rotate() function with an argument of 5deg.
Now hover the cursor over the word “Argentina” to see it rotate!
Finally, lets translate the mail info text at the top of the postcard. Inside the .location-details rules add a transform property with a value of the translate() function. For the function’s arguments translate the element 60% on the x-axis and 50% on the y-axis.
Don’t forget to separate the arguments with commas.