Transform: This property takes one or more space-separated transform functions (listed below) to apply to an element, for example transform: translate (3em, -24px) scale(.8);. Transform functions can take negative values, and the default is none. The transform functions include the following:

• translate(): Moves the element from its transform-origin along the X, Y, and/or Z-axes. This can be written as translate(tX), translate(tX, tY), and translate3D(tX, tY, tZ) (percentage except tZ, lengths). There’s also the 2D translateX(tX) and translateY(tY), and the 3D translateZ(tZ).2

• rotate(): Rotates the element around its transform-origin in twodimensional space, with 0 being the top of the element, and positive rotation being clockwise (angles). There are also the rotateX(rX), rotateY(rY), and rotateZ(rZ)3 transformation properties to rotate around an individual axis. Finally, there’s rotate3D(vX, vY, vZ, angle) to rotate an element in three-dimensional space around the direction vector of vX, vY, and vZ (unitless numbers) by angle (angles).

• scale(): Changes the size of the element, with scale(1) being the default. It can be written as scale(s), scale(sX, sY), and scale3D(sX, sY, sZ) (unitless numbers). There’s also the 2D transforms scaleX(sX) and scaleY(sY), and the 3D transform scaleZ(sZ).4

• skew(): Skews the element along the X (and, if two numbers are specified, Y) axis. It can be written as skew(tX) and skew(tX, tY) (angles). There’s also skewX() and skewY().5

• matrix(): This transform property takes a transformation matrix that you know all about if you have some algebra chops. matrix() takes the form of matrix(a, b, c, d, e, f) (unitless numbers). matrix3D() takes a 4×4 transformation matrix in column-major order. The 2D transform matrix()

  Example:

  The transform: translate(); example in Figure contains both one and two value translations, including negative values.

  div {width: 25%; height: 100px; /* by default translate: transform(0); */}

  span {display: inline-block; width: 50%; height: 50px; transform: translate(-3px,47px);} div, span {border-width: 3px; transition: all 1s; /* ease by default */}

  figure:hover div {transform: translate(280%); /* same as translateX(280%); */} figure:hover span {transform: translate(90%,-3px);}

  Note that we’ve made the inner box cover the outer box’s border so we can demonstrate a translate with a negative value.

Output:

Figure: A box that animates on hover, showing transform: translate() with one value (the outer box moves from left to right) and two values (the inner box moves horizontally and vertically)