Transforms

Transforming Elements

RSVP
.letters {
transform:
 translate(-90px, 300px) rotate(50deg) scale(.7, .9) skew(15deg);
}
selector {
	transform: none | <transFunc()> [<transFunc()>];
}

2D Transform Functions

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

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

Transform Function: Rotate

RSVP
transform: rotate(90deg);

Transform Function: Scale

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

Transform Function: Skew

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

transforms

  • Take advantage of transform-origin
  • Multiple values are SPACE separated (no commas)
  • The order of the values matters
  • 3D transforms are hardware accelerated
  • Play with Westciv's Transform Tool
  • Matrix is another syntax
  • More about transforms
  • function order

    Transform Order

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

    translateX(200px)
    rotate(135deg)

    Funtion Order

    3D Transform Functions

    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 letters 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.

    3D Transform Related Properties

    3D 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-3d
    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.

    Perspective

    Perspective

    Screens are flat. 3D requires perspective.
    1. transform: perspective(100) ...
    2. perspective: 100

    Difference: with the parent property, all the transformed elements share the same perspective. with the function, each transformed element has it's own perspective.

    Transform Function: perspective()

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

    The perspective() function must come first

    Smaller numbers have a bigger impact

    perspective Property

    transform: perspective(400px) v. perspective: 400px

    transform: perspective(400px) on children

    1
    2
    3

    perspective: 400px on parent

    1
    2
    3

    perspective-origin

    perspective-origin

    perspective-origin: x y

    • Property on parent element
    • Positions the perspective relative to parent, defining the origin for the perspective property.
    • Sets the X and Y position at which the viewer appears to be looking at the children of the element.

    perspective-origin Property

    perspective-origin with perspective: 400px

    perspective-origin: 0 0 on parent

    1
    2
    3
    1
    2
    3

    only works if perspective is on that parent!

    transform-origin

    transform-origin property

    RSVP
    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

    RSVP
    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

    transform-style

    transform-style: flat | preserve-3d
    How to handle nested elements are rendered in 3D space.
    • Default is flat
    • Set on parent element
    • Only works if the following are set to their default values:
      • overflow
      • clip
      • clip-path
      • filter
      • mask-border-source
      • mask-image
      • mix-blend-mode

    transform-style Property

    transform-style Property

    backface-visibility

    backface-visibility Property

    transform-box property

    Future: Defines the layout box, to which the transform and transform-origin properties relate to. (FF, Ch 64, O 51)

    border-box
    border box as reference box.
    fill-box
    Uses the object bounding box as reference box.
    view-box
    Nearest SVG viewport as reference box. If viewBox attribute exists, the reference box is at the viewBox 0 0, and the width and height are those of the viewBox attribute.

    Transitions & Animation

    Next ➹

    Links