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.
.shifted { transform: translate(0px, 100px); }
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.