The CSS Transform Property

The CSS transform property is used to specify two-dimensional or three-dimensional transformation of an element. This property can be used to rotate, scale, translate, or skew an element on a webpage. The transform property is specified as a list of transform functions, separated by spaces.

Basic syntax:

transform: none|transform-functions|initial|inherit;

For demonstration purposes we’ll have a simple div

<div class="square">
<p>Hello</p>
</div>

with the following styles:

.square {
width: 200px;
height: 200px;
background-color:rgb(33, 94, 159);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
transition: all .8s ease-in-out;
}

Here I’ll just use the transition so we can see the transformation better. There are a lot of transformation values.

The transform functions

Using the transform functions or values we can perform a transformation.

Scale

If you want to make an element bigger (scale) on hover, we can use the scale() function like this:

.square:hover {
transform: scale(1.5);
}

Rotate

We can also use the rotate() function to rotate an element

.square:hover {
transform: scale(1.5) rotate(90deg);
}

Here we make the element bigger by 50% and rotate it clockwise 90degree.

Translate

The translate value moves an element on a webpage on the x and y axis.

.square:hover {
transform: translate(50px, 100px);
}

This moves the div 50px to the right and 100px down. To change the directions, we can use negative values here as well.

If you don’t want to move the element in two directions, you can use the single versions of this value such as

.square:hover {
transform: translateX(100px);
}

this will move the element accross the X axis. Or if you want to move the element up or down, you can use the translateY function

.square:hover {
transform: translateY(100px);
}

Skew

The css skew function is used to skew elements in a document. It takes two arguments, the first of which is the angle of skew, and the second of which is the amount of skew.

It takes two parameters in the form of degree, the first affecting the horizontal the second the vertical axis.

.square:hover {
transform: skew(30deg, 10deg);
}

Just like with the translate function we can use single versions here too:

.square:hover {
transform: skewX(30deg);
}

or

.square:hover {
transform: skewY(30deg);
}

CSS 3D Transformations

So far we have looked at 2D transformations which changed the element on the X and Y axis. CSS 3D transformation is a set of CSS properties that allow you to change the position, rotation, and scale of an element in three-dimensional space or the Z-axis.

Rotate3d

This function rotates an element around the x, y and z-axis.

.square:hover {
transform: rotate3d(1,0,1, 45deg);
}

The first value corresponds with the X-axis, the second value with the Y-axis and the third value with the Z-axis. These are responsible for the rotation. The forth value is the angle of the rotation. For clockwise rotation we provide a positive angle value, for counter-clockwise rotation we provide a negative angle value.

Translate3d and Perspective

The translate3d function moves an element to a different location in 3d space. Here it’s best to illustrate with the perspective function which is used to create a 3D effect on an element. It can be used to give the illusion of depth and distance. It works in conjunction with 3d functions.

.square:hover {
transform: perspective(600px) translate3d(50px, -80px, -150px);
}

Default syntax for translate3d

translate3d(tx, ty, tz)

Scale3d

This function allows you to scale/resize an object or element in three dimensions. It has three values that specify the amount of scaling in each direction.

.square:hover {
transform: scale3d(2,0.5,2);
}

The transform-origin property

The css transform-origin property sets the origin or starting point for transformations applied to an element. The value can be a keyword, length, percentage or keyword followed by a length. The default value is “0px 0px”, or “50% 50%” and the origin of a transform is center.

Keywords can be: left, right, top, bottom, center

This property can have up to three values each representing an offset.

• First value: represents the horizontal position
• Second value: represents the vertical position
• Third value: represents the Z-axis, but in this case we need to use a 3d transform function and the value cannot be percentage based

.square:hover {
transform: scale(1.4);
transform-origin: bottom right 60px;
}