An Introduction to CSS Transforms, CSS Summit, 2012

Specifies the x and y position of the origin, relative to the transform object.

• Keyword positions: left, right, bottom, top, center
• Length values
• Percentage values (default = 50% 50%)

Rotate

Sets a horizon point at the given coordinates on the parent element. Changes the perceived vantage point at which the user appears to be looking at child elements.

• Keyword positions: left, right, bottom, top, center
• Length values
• Percentage values (default = 50% 50%)

Which transform or transforms to apply.

• transform: function();
• transform: function() function();

Coordinate vector × Transform matrix = Transformed coordinates

Partial list. Sources: SVG and CSS Transforms specifications.

• transform: matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
• transform: matrix(1,0,0,1,tx,ty);
• transform: matrix(1,0,tan(a),1,0,0);
• transform: matrix(1,tan(a),0,1,0,0);
• transform: matrix(cos(a),-sin(a),tan(a),0,1,0,0);

• matrix(a,b,c,d,e,f)
• rotate(ang)
• translate(tx[,ty])
• translateX(tx)
• translateY(ty)
• scale(sx[,sy])
• scaleX(sx)
• scaleY(sy)
• skewX(ang)
• skewY(ang)

• matrix3d(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p)

• translate3d(tx, ty, tz)
• translateZ(tz)
• scale3d(n,n,n)
• scaleZ(n)
• rotate3d(n, n, n, ang)
• rotateX(ang)
• rotateY(ang)
• rotateZ(ang)
• perspective(len)

• backface-visibility
• transform-style
• transform-origin
• perspective
  (not to be confused with the perspective() function)

hidden or visible

Toggle backfaces

flat or preserve-3d

Toggle transform style

Applied to parent element. Smaller = closer; larger = farther

Fixed / absolute positioned children are offset from the parent, not the root element.

Toggle transform

• Transition demos
• CSS Transforms, Editors Draft
• Modernizr
• Intro to CSS 3D transforms
• Understanding the CSS Transforms Matrix
• Bluebit's Online Matrix Calculator