CSS Transforms

CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements.  One or more transformations can be applied to a given element and transforms can even be animated using CSS animations.

Transform Types

There are several types of CSS transforms, each performing a different function.  The following are the transform types with example value:

• transform: none
• transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
• transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
• transform: rotate(0.5turn)
• transform: rotateX(3deg)
• transform: rotateY(3deg)
• transform: rotateZ(3deg)
• transform: rotate3d(1, 2.0, 3.0, 3deg)
• transform: scale(3, 3.5)
• transform: scaleX(3)
• transform: scaleY(0.6)
• transform: scaleZ(0.9)
• transform: scale3d(2.5, 1.2, 0.3)
• transform: skewX(44deg)
• transform: skewY(1.9rad)
• transform: translate(12px, 20%)
• transform: translateX(5em)
• transform: translateY(9in)
• transform: translateZ(4px)
• transform: translate3d(40px, 20%, 5em)
• transform: perspective(40px)

All text, imagery, background imagery, and other elements will be transformed accordingly.

Multiple Transforms

Applying multiple transforms to an element is simple:

.myTransformElement {
	transform: scale(2) skewY(0.3) rotate(4deg);
}

Separate multiple transforms using spaces!

Sibling Property: transform-origin

Transforms have a sibling property of transform-origin.  The transform-origin property provides a point of origin for the given transform to take place:

.myTransformElement {
	transform: scale(2) skewY(0.3) rotate(4deg);

	transform-origin: 0 0;
	transform-origin: 50% 50%;
	transform-origin: -5em 3em;
}

As you can see above, there are several formats of transform-origin to choose from.

Animating Transforms

Animating CSS transforms is just as easy as animating any other CSS property:

.container {
	transform: rotateY(2deg);
	transition: 0.6s;
	transition-property: transform;
}

.container:hover {
	transform: rotateY(180deg);
}

@keyframe animations can also be used to animate CSS transforms.

CSS Transform Examples

• Create a Photo Stack Effect with CSS
• CSS Flip Animation
• CSS 3D Folding Animation