Transforms

https://estelle.github.io/CSS/transforms

Transforms

  • 2D Transform Functions
  • Transform syntax
  • translate()
  • rotate()
  • transform-origin
  • scale()
  • skew()
  • Multiple Tranforms
  • matrix()
  • Transform function order
  • 3D Transform Functions
  • 3d Transforms
  • translateZ()
  • perspective()
  • translate3d()
  • rotate3d()
  • matrix3d()
  • 3D Transform Related Properties
  • perspective Property
  • DevTools
  • perspective() function v. perspective property
  • perspective-origin
  • transform-origin property
  • transform-style Property
  • backface-visibility Property
  • Exercise
  • transform-box property

2D Transform Functions

Transforming Elements

LOVELOVE

Transform: syntax

transform: none | <transFunc()> [<transFunc()>];
transform:
   translate(300px, 90px) rotate(50deg) 
   scale(0.7, 0.9) skewX(15deg);

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>)
Rotates an element around a fixed point on the 2D plane. 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.
rotateX(<angle>)
specifies a 2D rotation by the angle specified in the parameter about the origin of the element along the horizontal or X-axis, as defined by the transform-origin property. For example, rotateX(90deg) would cause elements to disappear, and rotateX(180deg) would cause elements to flip horizontally around the x-axis, appearing upside down and viewed from the back.
rotateY(<angle>)
specifies a 2D rotation by the angle specified in the parameter about the origin of the element along the vertical or Y-axis, as defined by the transform-origin property. For example, rotateY(90deg) would cause elements to disappear, and rotateY(180deg) would cause elements to flip vertically around the x-axis, appearing backwards and viewed from the back.
skew(<angle>)
specifies a skew transformation along the the 2D plane.
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].

We'll cover more in a bit....

Limitations

Only transformable elements can be transformed.

  • all elements whose layout is governed by the CSS box model, except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.
  • Fix: set display: inline-block; on inline elements
  • Fix: position generated content

Transform Function: Translate

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.

Transform Function: Translating

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

Edit a value to set it. Mouse out of a value to see it.

transform: translate()

LOVELOVE

Remove the underscores to activate.

Transform Functions: Rotations

rotate(<angle>)
Rotates an element around a fixed point on the 2D plane. 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.
rotateX(<angle>)
specifies a 2D rotation by the angle specified in the parameter about the origin of the element along the horizontal or X-axis, as defined by the transform-origin property. For example, rotateX(90deg) would cause elements to disappear, and rotateX(180deg) would cause elements to flip horizontally around the x-axis, appearing upside down and viewed from the back.
rotateY(<angle>)
specifies a 2D rotation by the angle specified in the parameter about the origin of the element along the vertical or Y-axis, as defined by the transform-origin property. For example, rotateY(90deg) would cause elements to disappear, and rotateY(180deg) would cause elements to flip vertically around the x-axis, appearing backwards and viewed from the back.

Transform Function: rotate()

LOVELOVE
transform: rotate(90deg);

Edit the value to set it. Mouse out to see it.

Transform Function: Rotate

LOVELOVE
transform: rotate(90deg);
transform: rotateX(90deg);
transform: rotateY(90deg);

Edit the value to set it. Mouse out to see it.

transform: rotate()

LOVELOVE

Remove the underscores to activate.

transform-origin property

transform-origin: <x-offset> [ <y-offset>? ] [ <z> ]?;
  • The point around which a transformation is applied.
  • Default: transform-origin: 50% 50% 0;
  • offsets for X are <length>, <percentage> or the
    keywords left | center | right
  • offsets for X are <length>, <percentage> or the
    keywords top | center | bottom
  • If 2 or 3 values and either no value is a keyword, the first value is the X-offset (horizontal) and the second is the Y-offset (vertical).
  • If only one keyterm, the other defaults to center, and Z = 0.
  • If only one length, that is the x-offset, y = center and Z = 0.
  • <Z> can only be a length, defaulting to 0 if omitted.

transform-origin property

LOVELOVE

Remove the underscores to activate. Change the transform-origin value

Transform Function: Scaling

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.

Transform Function: scale()

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

Edit a value to set it. Mouse out of a value to see it.

transform: scale() & transform-origin

LOVELOVE

Remove the underscores to activate. Change the transform-origin value

Transform Function: skew()

skew(<angle>)
specifies a skew transformation along the the 2D plane.
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.

Transform Function: skew()

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

Edit a value to set it. Mouse out of a value to see it.

Transform Function: skew()

LOVELOVE

Remove the underscore to activate the CSS

transform: skew() & transform-origin

LOVELOVE

Remove the underscore to activate the CSS

Multiple Tranforms

LOVELOVE

Multiple Tranforms

LOVELOVE

Multiple Tranforms with transform-origin

LOVELOVE

Developer Tools

LOVELOVE

Check it out

Go

Transform Function: matrix()

matrix(a, b, c, d, tx, ty)
shorthand for
matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)
(which makes no sense).

Computer generated transform.

transform: matrix(a, b, c, d, tx, ty)

LOVELOVE

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)

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
  • Funtion Order

    3D Transform Functions

    3d Transforms

    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.
    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.
    scaleZ(<number>)
    specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
    scale3d(<number>, <number>, <number>)
    specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
    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.
    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.

    transform: translateZ()

    LOVELOVE

    Remove the underscores to activate.

    transform: perspective()

    perspective(<number>)

    • specifies a perspective projection.
    • Parameter is the depth, represents the distance of the viewer:
      • Lower values are closer, more pronounced perspective effect
      • Larger values are further, less pronounced persepective
    • depth must be greater than zero, otherwise invalid
    • depth must be greater than translateZ, or the element is behind the viewer
    • perspective() must be the first transform function of the list of functions

    transform: perspective() & translateZ()

    LOVELOVE

    Remove the underscores to activate.

    transform: translate3d()

    LOVELOVE

    Remove the underscores to activate.

    3D Translating

    translateZ( <length> )

    Specifies a 3D translation by the vector [0, 0, tz].

    translate3d( <length-percent> , <length-percent> , <length> )

    Specifies a 3D translation by the vector [tx, ty, tz], in that order.


     translateZ( 200px ) == translate3d( 0, 0, 200px )

    3D Scaling

    scaleZ( <number> )

    Specifies a 3D scale operation using the [1, 1, sz] scaling vector, where sZ is the parameter.

    scale3d( <number> , <number>, <number> )

    Specifies a 3D scale operation by the [sx, sy, sz] scaling vector described by the 3 parameters.


    scaleZ( 0.7 ) == scale3d( 1, 1, 0.7 )

    3D Rotation

    rotate3d( <number> , <number> , <number> , <angle> )

    Specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. The angle can be zero.

    rotateX( <angle> )
    rotateY( <angle> ) 

    Same as rotate3d(1, 0, 0, <angle>) or rotate3d(0, 1, 0, <angle>), respectively. Angle can be zero.

    rotateZ( <angle> )

    same as rotate3d(0, 0, 1, <angle>), which is a 3d transform equivalent to the 2d transform rotate(<angle>). Angle can be zero.

    transform: rotate3d()

    LOVELOVE

    Remove the underscores to activate.

    3D Matrix

    matrix3d( <number>#{16} )

    specifies a 3D transformation as a matrix of 16 values

    matrix(a, b, c, d, tx, ty) is a shorthand for
    matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).


    matrix(-0.5, 1, 1, -0.5, 20, 20)
    matrix(-0.5, 1, 0, 0, 1, -0.5, 0, 0, 0, 0, 1, 0, 20, 20, 0, 1)

    transform: matrix3d()

    LOVELOVE

    3D Transforms: Perspective

    perspective( <length> )
    • Positive Z values moves away from the origin and toward the user.
    • The greater the value, the further away from the z=0 plane
    • Lower values have a more pronounced perspective effect.

    The parameter is the distance of the z=0 plane from the viewer.

    Must be greater than zero!

    This page intentionally
    left blank

    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()

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

    The perspective() function must come first

    Smaller numbers have a bigger impact

    perspective Property

    LOVELOVE

    Edit the above to see what happens.

    DevTools

    Edit the previous slide via devTools

    Click 'shift' on angles to change the format.

    Hover over a transform property in the Rules view to see the transformation overlaid on the page (note: this doesn't work quite right on generated content)

    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.
    • Determines the position at which the viewer is looking.
    • Used as the vanishing point by the perspective property

    perspective-origin Property

    LOVELOVE
    LOVELOVE

    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!

    perspective-origin Property

    transform-origin

    transform-origin property

    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 is 50% 50% (or center center)
    • Supported in all browsers that support transform. Prefixed if transform is prefixed

    transform-origin property

    LOVELOVE

    change the values

    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

    Parent

    Child

    transform-style Property

    LOVELOVE
    LOVELOVE

    transform-style Property

    backface-visibility

    backface-visibility Property

    LOVELOVE
    LOVELOVE

    Exercise

    Here's where all the magic happens! Let's make all the cards slightly off-center so each can be hovered individually. We hide the face of the cards, making the card flip, making the face visible on hover but the back disappear.

    1. Add a fairly distant perspective to each card.
    2. Flip just the face of each card, ensuring the children are flipped too, and we don't see 'thru' the back of the front of the card.
    3. When the card is hovered, flip it back so we see the face.
    4. The back of the card should be visible when not hovered, but rotated to the back when the card is flipped, so we see the face of the card only at that point.
    5. Move each card a little bit so we can see the top card as well as a bit of the 2nd and third card in the default state, seeing a bit more of the 2nd and 3rd cards when they're flipped.

    In the next section, we'll and a transition, to make the flip / motion visible.

    HTML | CSS

    Solution

    HTML | CSS

    Solution

    .card {
      perspective: 600px;
    }
    .card .front {
      transform: rotateX(0deg) rotateY(0deg);
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }/* non-hovered card */
    .card:first-of-type {
      transform: rotate(-10deg);
    }
    .card:nth-of-type(2) { 
      transform: rotate(15deg) translatex(5px);
    }
    .card:last-of-type { 
      transform: rotate(0deg);
    }
    
    /* on hover */
    .card:first-of-type:hover {
      transform: translatex(-200px) rotate(10deg);
    }
    .card:nth-of-type(2):hover {
      transform: translatex(200px) rotate(0);
    }
    .card:last-of-type:hover {
      transform: translatey(200px) rotate(5deg);
    }
    
    /* cardFlip */
    .card:hover .front {
        transform: rotateY(0);
    }
    .card:hover .back {
        transform: rotateY(180deg);
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    }

    transform-box property

    Defines the layout box, to which the transform and transform-origin properties relate to.

    content-box | border-box | fill-box | stroke-box | view-box
    content-box
    content box as reference box
    border-box
    border box as reference box.
    fill-box
    Uses the object bounding box as reference box.
    stroke-box
    stroke 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.

    transform-box property

    content-box | border-box | fill-box | 
      stroke-box | view-box 

    change the values

    Transitions & Animation

    Next ➹

    Links