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

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

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:

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