CSS Transforms

By David Walsh on November 2, 2012

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.

View Demo

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.

View Demo

CSS Transform Examples

Recent Features

By David WalshMay 6, 2015

I’m an Impostor

This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...

By David WalshSeptember 3, 2014

Create a CSS Flipping Animation

CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

By David WalshDecember 5, 2012

Disable Autocomplete, Autocapitalize, and Autocorrect

Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features. Unfortunately these features can sometimes get in the way; we don't always want or need the help they provide. Luckily most browsers allow...

By David WalshMarch 27, 2008

Using MooTools For Opacity

Although it's possible to achieve opacity using CSS, the hacks involved aren't pretty. If you're using the MooTools JavaScript library, opacity is as easy as using an element's "set" method. The following MooTools snippet takes every image with the "opacity" class and sets...