{ CSS Transforms. }

Objectives:

By the end of this chapter, you should be able to:

CSS Transforms

Transforms are a newer CSS technology that allow us to move elements on the page by translating them, rotating them, scaling them, and more. Sometimes these transforms are used in isolation, but they're more commonly found in conjunction with CSS animations, which we'll get to in the next chapter.

There's only one property you need to know to use transforms: the transform property. However, this property can take a variety of different values. Here's an overview:

Here's an example of what these transforms look like in action. This HTML page has two divs with identical content, but one is transformed:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #original, #transformed {
      width: 100px;
      height: 100px;
      color: red;
      background-color: purple;
      text-align: center;
      padding: 20px;
      border: 10px solid black;
    }

    #transformed {
      transform: translate(200px, 100px) rotate(45deg) scale(3,1);
    }
  </style>
</head>
<body>
  <div id="original">Hi, I'm a div.</div>
  <div id="transformed">Hi, I'm a div.</div>
</body>
</html>

transformed div

There are a number of other values that the transform property can take. For an exhaustive list, check out the documentation.

When you're ready, move on to CSS Transitions

Continue

Get 100+ hours of free content, tutorials, and screencasts

Send us your email, and we'll give you a confirmation code to unlock all of our materials. No spam, we promise.