Transforms

Transforming Elements

.plane {
-webkit-transform: /* Safari */
 translate(-90px,300px) rotate(50deg) scale(.7,.9) skew(5deg);
-ms-transform: /* IE9 */
 translate(-90px,300px) rotate(50deg) scale(.7,.9) skew(5deg);
transform:
 translate(-90px,300px) rotate(50deg) scale(.7,.9) skew(5deg);
}
selector {
	transform: none | <transFunc()> [<transFunc()>];
}

2D Transform Functions

translate(<length>[, <length>])
specifies a 2D translation by the vector [x, y], where x is the translation-value parameter for the x axis and y is the optional translation value along the y axis. parameter. If y is not provided, y==0.
translateX(<length>)
specifies a translation by the given amount in the X direction.
translateY(<length>)
specifies a translation by the given amount in the Y direction.
scale(<number>[, <number>])
specifies 2D scaling operation by the [sx,sy]. If sy is not provided, sy will equal sx (growsing or shrinking with the same scale). Scale(1, 1) or scale(1) leaves an element in it's default state. Scale(2, 2) or scale(2) causes the element to appear twice as wide and twice as tall as its default size, taking up 4-times the original area.
scaleX(<number>)
specifies a scale operation using the [sx, 1] scaling vector, where sx is given as the parameter.
scaleY(<number>)
specifies a scale operation using the [1, sy] scaling vector, where sy is given as the parameter.
rotate(<angle>)
specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
skewX(<angle>)
specifies a skew transformation along the X axis by the given angle.
skewY(<angle>)
specifies a skew transformation along the Y axis by the given angle.
matrix(<num>, <num>, <num>, <num>, <num>, <num>)
Generally machine generated, specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].

Transform Function: Translate

transform: translate(100px, 100px);
transform: translateX(100px);
transform: translateY(100px);

Transform Function: Rotate

transform: rotate(90deg);

Transform Function: Scale

transform: scale(0.25, 0.75);
transform: scale(0.75);
transform: scaleX(0.25);
transform: scaleY(0.75);

Transform Function: Skew

transform: skewX(5deg);
transform: skewY(5deg);
transform: skewX(5deg) skewY(5deg);
transform: skew(5deg,5deg);

transforms

  • Chrome
  • Safari
  • Firefox 3.5
  • Opera 10.5
  • IE 9
  •   all with vendor prefix
  • Vendor prefix all of -webkit- for Safari and Android and -ms- for IE9
  • Take advantage of transform-origin
  • Multiple values are SPACE separated (no commas)
  • 3D transforms are hardware accelerated
  • Play with Westciv's Transform Tool
  • Matrix is another syntax
  • More about transforms
  • Transform Order

    Order of transform functions matters: if you rotate first, your translate direction will be on the rotated axis!

    translateX(200px)
    rotate(135deg)

    3d Transforms

    translate(<x-length>[, <y-length>])
    specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.
    translate3d(<x>, <y>, <z>)
    specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.
    translateX(<x-length>), translateY(<y-length>)
    specifies a translation by the given amount in the X or Y direction.
    translateZ(<z-value>)
    specifies a translation by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0.
    scale(<number>[, <number>])
    specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
    scale3d(<number>, <number>, <number>)
    specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
    scaleX(<number>), scaleY(<number>)
    specifies a scale operation using the [sx,1,1] or [1,sy,1] scaling vector, where sx or sy is given as the parameter respectively.
    scaleZ(<number>)
    specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
    rotate(<angle>)
    specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.
    rotate3d(<number>, <number>, <number>, <angle>)
    specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters. If the direction vector is not of unit length, it will be normalized. A direction vector that cannot be normalized, such as [0, 0, 0], will cause the rotation to not be applied. This function is equivalent to matrix3d(1 + (1-cos(angle))*(x*x-1), -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0, z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1), -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z, x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0, 1).
    rotateX(<angle>)
    specifies a clockwise rotation by the given angle about the X axis.
    rotateY(<angle>)
    specifies a clockwise rotation by the given angle about the Y axis.
    rotateZ(<angle>)
    specifies a clockwise rotation by the given angle about the Z axis.
    skewX(<angle>),skewY(<angle>)
    specifies a skew transformation along the X axis or Y axis by the given angle.
    skew(<angle> [, <angle>])
    specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie. no skew on the Y axis).
    matrix(<number>{6})
    specifies a 2D transformation in the form of a transformation matrix of six comma separated values. matrix(a,b,c,d,e,f) is equivalent to matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1).
    matrix3d(<number>{15})
    specifies a 3D transformation as a 4x4 homogeneous matrix of 16 comma separated values in column-major order.
    perspective(<number>)
    specifies a perspective projection matrix. This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer's position. The viewable area is the region bounded by the four edges of the viewport (the portion of the browser window used for rendering the webpage between the viewer's position and a point at a distance of infinity from the viewer). The depth, given as the parameter to the function, represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. The value is given in pixels, so a value of 1000 gives a moderate amount of foreshortening and a value of 200 gives an extreme amount. The matrix is computed by starting with an identity matrix and replacing the value at row 3, column 4 with the value -1/depth. The value for depth must be greater than zero, otherwise the function is invalid.

    Other Transform related Properties

    perspective: none | length
    Same as transforms: perspective(value) except it applies to the positioned or transformed children of the element, not the element itself.
    transform-origin: length | keyterm {1,3}
    The centerpoint of the transform
    transform-style: flat | preserve-3s
    How to handle nested elements are rendered in 3D space.
    perspective-origin: pos relative to parent
    Defines the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.
    backface-visibility: visible | hidden
    When an element is flipped, is the content that is flipped away from user visible or not.

    Transform Function: Perspective

    transform:  perspective(40px) rotateX(10deg);

    The perspective() function must come first

    Smaller numbers have a bigger impact

    Perspective Property

    .child {
      transform: rotateX(10deg);
    }
    .parent {
       perspective: 40px;
    }

    perspective-origin Property

    transform-origin property

    transform: perspective(40px) rotateX(10deg);
    transform-origin:  top left;

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

    transform-origin property

    transform: rotate(90deg);
    transform-origin:  top left;
    • Keyword positions: left, right, bottom, top, center
    • Length values
    • Percentage values
    • default is 50% 50% (or center center)
    • Supported in all browsers that support transform. Prefixed if transform is prefixed

    transform-style Property

    backface-visibility Property

    Transitions & Animation

    Next ➹