| Interactive Media Design

CSS Transform

The transformopen in new window property can be used to modify the element allowing us to rotate, scale, skew or translate(relocate) an element. It changes the shape and position of an element without disrupting the normal flow of the document.

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 functionsopen in new window available, the following functions are most popular.

rotate

The rotate()open in new window 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 an angleopen in new window and 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()open in new window 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. Ex: value of 1.2 would scale the element 1.2 times the original size.
  • Scaling smaller would be a number less than 1. Ex: value of .5 will scale to half the original size of the element.
  • A value of 1 would have no effect at all.

translate

The translate()open in new window function relocates an element along the x and/or y axes.

skew

The skew()open in new window function defines the transformation that skews an element horizontally, vertically or both.

  • The skew() function accepts up to two values which is the amount of the skewing to be applied in each direction x and y.
  • A single value will skew the element only on x axis.
  • We can also use variations of skew function as skewX or skewY to specifically target horizontal or vertical skew.
  • The value is an angleopen in new window and can be in degrees (deg), turns (turn), gradians (grad) and radians (rad) units.

Multiple transforms

We can apply multiple transform functions to one element using the same transform property.

  • The different transform function are added on the same transform property
  • The functions are separated by space and not a comma

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

Transform Origin

In addition to the transform property, transform-originopen in new window specifies the point on the element from which a transform is based.

  • transform-origin can accept two values, first for x-axis and second for y-axis
  • The value can be in px, percentage or keywords such as left, right, top, bottom or center.

Example: in the case of a rotation, the default is the centre of the element but we can specify an alternative origin as needed.

3D Transform

We have looked at the 2D transform in the above examples, however the world of 3D transform allows us to create even more complex interactions.

Here is an example to showcase what a simple 3D transform can be used for. Watch the video at the end of this page to learn more about 3D transform.

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.