CSS Transforms

By  on  

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

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    MooTools FontChecker Plugin

    There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools. The MooTools...

  • By
    Save Web Form Content Using Control + S

    We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!