• 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

transform: none | <transFunc()> [<transFunc()>];

transform:
   translate(300px, 90px) rotate(50deg) 
   scale(0.7, 0.9) skewX(15deg);

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

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

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: translate(100px, 100px);

transform: translateX(100px);

transform: translateY(100px);

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

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: rotate(90deg);

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

transform: rotate(90deg);

transform: rotateX(90deg);

transform: rotateY(90deg);

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

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.

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

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

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

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

Remove the underscore to activate the CSS

Remove the underscore to activate the CSS

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.

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

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.

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

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 )

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 )

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.

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)

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!

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.

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:  perspective(40px) rotateX(10deg);

The perspective() function must come first

Smaller numbers have a bigger impact

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

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

change the values

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

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.

.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);
}

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.

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

change the values