Changing Elements

CSS has a property called transform where a two-dimensional transformation is applied to an element. This property contains a list of transform functions similar to those allowed by SVG. The transform property can be applied to any HTML element and all children elements will inherit the transformation applied to a parent element. I will be trying out several values of the transform property and showcasing their effect. You can refer to this table that summarizes all the values.

Use Cases

CSS transform is mostly used when we need to affect a change in the shape or position of an HTML element. This change will almost always distinguish the element from the original state in its definition. The transform property works well with CSS animations too, you can read this article that goes into the basics of animation with CSS. Also, make sure to refer to the MDN article about CSS transform.

The syntax of using transform looks like this:

  selector{
    transform: value();
  }

Where value() is any one of the functions that are accepted by the transform property. Refer to the table below for definitions of each function.

Examples

To demonstrate how CSS transform works, we need some HTML code to apply the CSS rules. The following HTML code will serve as a good template:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transform Property 🤖</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="item"></div>
</body>

</html>

Then, we can apply the following base CSS rules:

*, *::before, *::after{
    padding: 0;
    margin: 0;
}

body{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.item{
    margin: 200px auto;
    width: 30%;
    height: 30%;
    background-color: violet;
    border: 1px solid black;
    border-radius: 10px;
    transition: 0.1s ease-in-out;
}

The code samples above will make a violet rectangle in the middle of the browser window:

CSS transform is ideally paired with a pseudo-class or animation Key Frames in order to apply a gradual effect. Here is an example of a transformation that increases the size of the element when a user places their mouse cursor over the element.

.item:hover{
    cursor: pointer;
    transform: scale(1.5);
    border: 3px dotted black;
}

It is also possible to apply the transformation definition when a user clicks the element as shown below:

.item:active{
    cursor: pointer;
    transform: matrix(0.5, 2, 2.5, 3, 3.5, 4);
    border: 3px dotted black;
}

The skew() function can be used on the hover state as shown below:

.item:hover{
    cursor: pointer;
    transform: skew(20deg);
}

Another cool thing we can do is combine two CSS transform functions to apply two rules on an element. For example, we can combine the scale() and skew() functions on the hover pseudo-class as shown below:

.item:hover{
    cursor: pointer;
    transform: scale(1.5) skew(20deg);
    border: 3px dotted black;
}

Notice how the violet rectangle skews along the X and Y axes as well as increases in size.

Animations

Using CSS transform as part of animation Key Frames is an ideal way of using it. Alternatively, you could use margin to manipulate movement but that could break the layout of a web page. Using transform ensures that surrounding elements stay in position in addition to the movement.

Here is an example of applying a CSS animation utilizing the transform property inside the Key Frames.

Firstly define the @Key Frames rules:

@keyframes move-side-to-side {
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(50%);
    }
    100%{
        transform: translateX(0);
    }
}

Then apply the animation to the hover pseudo-class:

.item:hover{
    cursor: pointer;
    animation: move-side-to-side 0.5s linear infinite;
    border: 3px dotted black;
}

This enables the violet rectangle to move from one side to another.

Transformation Values

The table below is a summary list of some of the possible values that the CSS transform property can accept.

Wrapping Up

In this article, I've shown you how the transform property of CSS can be used to change the visible state of an element. Be sure also to read my article about CSS animations to learn more about it. I also have another one about Exploring HTML which is a good beginner's tutorial.

Your feedback is welcome through this link. Lastly, thank you for reading, and have a good day!

~ Thank you for reading