CSS transform

Go back to HTML and CSS Index

In this lesson, we will have a look at the CSS property transform.

The transform property

The transform property allow you to rotate, scale, move or skew HTML elements.

Let's have a look at some examples:

transform: rotate(angle)

The rotate() value is used to rotate an element:

The CSS

.diamond {
background-color: red;
height: 50px;
width: 50px;
transform: rotate(45deg);
}
12.00 | transform: rotate(45deg)

Example

As you can see from the example above, the square is rotated into a diamond shape.

Be aware that when you rotate an element, it still has the same size as before it was rotated, but it might end up taking up more space than it originally did.

If you want the rotation to happen when the user hovers the element, add the transform property with the rotate() value to the element with the :hover selector:

The CSS

.circle:hover {
transform: rotate(45deg);
}
12.00 | transform: rotate(45deg)

Example

Try hovering the image to see what happens.

transform: scale(x,y)

The scale(x,y) value will - as the name suggests - make the element scale to a certain size.

Let's have a look at an example:

The CSS

.tscale:hover {
transform: scale(1.4, 1.4);
}
12.00 | transform: rotate(45deg)

Example

Try hovering the image to see what happens.

As you can probably tell from the example, the element "grows" when you hover it, but it won't take up more space than it did initially, meaning that it may end up overlapping the elements surrounding it.

Assignments

Ace of Hearts

Try coding an Ace of Hearts like this one:

Ace Of Hearts

NB: The heart used in the example is the heart icon from Font Awesome

NB: The card has a width of 120px, and a height of 200px.

Tip 1: Wrap each A and heart (top left corner and bottom right corner) pair together in a div element.

Tip 2: Use Flexbox to place the elements

If you finish before time, try coding a Two of Hearts card.