Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

Part 8.1CSS transform

CSS can be used to modify rotation and other properties of an element. This is done using the programming-like-syntax property transform.


Rotation can be one of two types; 2D rotation and 3D rotation.

Rotation works like a function in any other language in that it uses a bracketed expression after a function name:

.rotated {
	transform: rotate(35deg);

It is important to specify the number of degrees that the element is to rotate by.

Rotation can also be 3 dimensional so that it affects all dimensions of an element. This is achieved with the rotate3d value to the transform property:

.rotated {
	/*Will rotate all axises*/
	transform: rotate3d(1, 1, 1, 35deg);
	/*Will rotate Y and Z axises only*/
	transform: rotate3d(0, 1, 1, 35deg);
	/*Will rotate X axis only*/
	transform: rotate3d(1, 0, 0, 35deg);

The examples, obviously, rotate the axises 35 degrees. The 1 or 0 represent true or false, that is if there is a 1 at that specific parameter, it will rotate that specific axis whereas if there was a 0 at that parameter it would not rotate that axis. It follows the alphabetical system in that it follows: XYZ.

The first example in the above sample is a shorthand for:

.rotated {
	transform: rotateX(35deg);
	transform: rotateY(35deg);
	transform: rotateZ(35deg);

As of August 2015, some browsers still do not fully support the unprefixed version of the transform property. It may still be necessary to include prefixed versions of this property to ensure full compatibility.


The transform property also permits scaling elements. This works almost identically to the rotate value in that all values work the same way:

Again, the scale value works in a 3D basis or individual basis:

.scaled {
	/*Will scale all axises*/
	transform: scale3d(1, 1, 1, 35deg);
	/*Will scale Y and Z axises only*/
	transform: scale3d(0, 1, 1, 35deg);
	/*Will scale X axis only*/
	transform: scale3d(1, 0, 0, 35deg);

.scaled {
	transform: scaleX(35deg);
	transform: scaleY(35deg);
	transform: scaleZ(35deg);
Feedback 👍
Comments are sent via email to me.