2D Transforms
While all the elements you have been working with up until now have been rectangular in shape, the transform
property changes the whole game.
With it, you can manipulate an element's angle, size, shape, position, and many others properties. The syntax for transform
is simple, and looks like this:
transform: function(values);
You simply indicate the function you want to apply, pass in some values and let the browser do the work.
2D Translate
Perhaps the easiest function to demonstrate is the translate
function.
Acting similar to using position: relative
and giving it a left
and top
value, it moves the element horizontally and vertically. The units for translate
is a length.
<!DOCTYPE html>
<html>
<head>
<title>Transform: Translate</title>
<style>
.box {
height: 5rem;
width: 5rem;
background-color: darkgreen;
transform: translate(10rem, 1rem);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

transform: translate(x, y);
The first value (x
) defines how far to translate the element horizontally, and the second value (y
) for how far to translate it vertically.
2D Rotate
You can rotate an element by using the rotate()
function, and passing in a degree value.
Passing in a positive value will make it rotate clockwise and a negative one will make it rotate counter-clockwise.
<!DOCTYPE html>
<html>
<head>
<title>Transform: Rotate</title>
<style>
.box {
height: 5rem;
width: 5rem;
margin: 5rem;
background-color: purple;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

transform: rotate(xdeg);
How cool is that?
2D Scale
You can scale up and down the apparent size of an element using the scale
function. The default value is 1
where any smaller value makes the element appear smaller, and any value bigger makes the element appear larger.
<!DOCTYPE html>
<html>
<head>
<title>Transform: Scale</title>
<style>
.box {
height: 5rem;
width: 5rem;
background-color: pink;
transform: scale(0.75, 1.25);
margin: 5rem;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

transform: scale(x, y)
Notice how two values were passed to scale
? The first value is for the x
and the second is for the y
.
The width
of the box was made to be 75% of the original width
, and the height
125% of the original height
.
2D Skew
Skewing an element lets you distort an element by adjusting the tilt on the horizontal and/or vertical axis. The value for the skew
function is in degrees.
<!DOCTYPE html>
<html>
<head>
<title>Transform: Skew</title>
<style>
.box {
height: 5rem;
width: 5rem;
background-color: red;
transform: skew(5deg, 10deg);
margin: 5rem;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

transform: scale(xdeg, ydeg)
Transform Origin
The origin of every transform
you perform will be, by default, at the very center of the element.
That is why when you try, for example, to rotate a box, it will rotate about the very center. If you wanted to rotate it around one of its edges, well, you're in luck.
Using transform-origin
, you can set the origin to wherever you want it to be. The default value is:
transform-origin: 50% 50%;
Multiple Transforms
In the event that one transform doesn't satisfy you, you can easily apply multiple at once by combining them.
All you need to do is supply the transform
property with your list of functions, and the browser will do the rest. Let's say you wanted to skew and scale a box:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Transforms</title>
<style>
.box {
height: 5rem;
width: 5rem;
margin: 5rem;
background-color: darkred;
transform: skew(5deg, 7deg) scale(1.25, 2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

There you have it. Feel free to let your imagination run wild by combining transforms!
In the last lesson before the conclusion, learn how to apply the transforms that you just learned, but in 3D instead!