|  Interactive Media Design

CSS Transform

The transform property continues with the concept of motion allowing for the rotation, scaling, skew or relocation of an element. It changes the shape and position of an element without disrupting the normal flow of the document.

In addition to the transform property, transform-origin specifies the point on the element from which a transform is based. In the case of a rotation, the default is the centre of the element but you can specify an alternative origin as needed.

There are two variations of transform available; 2 dimensions and 3 dimensions. We’ll focus on 2D transformations in this course but you should be aware that it is possible to transform elements on 3 dimensions.

Transform Functions

The transform property takes a function that provides the means to alter an element. While there are many different transform functions available, the following functions are most popular.

rotate

The rotate() transform function defines how an element should rotate around a fixed point on a 2D plane. The fixed point can be altered by adjusting the transform-origin property.

The rotate() function take an argument that specifies the angle at which to rotate. This can be in degrees (deg), turns (turn), gradians (grad) and radians (rad) units. Positive number will rotate clockwise or to the right and negative numbers will rotate counter-clockwise or to the left.

NOTE

By default the rotate() function will rotate an element on Z-axis. The functions rotateX() and rotateY() can be used to rotate an element on their respective axis.

scale

The scale() function resizes an element in 2 dimensions. It accepts one value that represents both x and y axes or two values for x and y each. In situations where you want to scale larger, pass a value larger than 1. A value of 1.2 would scale to 1.2 times the size. Scaling smaller would be a number less than 1. A value of 1 would have no effect at all.

translate

The translate() function relocates an element along the x or x and y axes. This functions works slightly different than scale() in that passing one value only moves the element along the x axis while passing two values will move the element on x and y. You may pass values that are of type <length> or <percentage>

skew

The skew() function defines the transformation that skews an element. The skew() function take one to values which is the amount of the skewing to be applied in each direction. The values can be in degrees (deg), turns (turn), gradians (grad) and radians (rad) units.

Multiple transforms

In this example we will use both the scale and rotate transform to grow and spin the box.

Further Review

Review the following material and be sure to download the lesson file to begin exploring transforms.

References

Reach Ahead

This YouTube video was created by Steve Griffith.