To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

CSS 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

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:

CSS
.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:

CSS
.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:

CSS
.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.

Scaling

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:

CSS
.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);
}
								

CSS
.scaled {
	transform: scaleX(35deg);
	transform: scaleY(35deg);
	transform: scaleZ(35deg);
}
								
Provide feedback on this page
Comments are sent via email to me.