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

`transform: translate()`

Remove the underscores to activate.

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

`rotate()`

`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: rotate()`

Remove the underscores to activate.

`transform-origin`

propertytransform-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`

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

`scale()`

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

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

`skew()`

`skew()`

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

`skew()`

Remove the underscore to activate the CSS

`transform: skew()`

& `transform-origin`

Remove the underscore to activate the CSS

`transform-origin`

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

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

`translateX(200px)`

rotate(135deg)

`transform-origin`

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

Remove the underscores to activate.

`transform: perspective()`

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

Remove the underscores to activate.

`transform: translate3d()`

Remove the underscores to activate.

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.

`transform: rotate3d()`

Remove the underscores to activate.

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

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!

left blank

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

`transform: perspective(100) ...`

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

`perspective()`

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

The `perspective()`

function must come first

Smaller numbers have a bigger impact

`perspective`

PropertyLOVE**LOVE**

Edit the above to see what happens.

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

propertySpecifies 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`

propertychange the values

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

PropertyParent

Child

`transform-style`

Property`transform-style`

Property`backface-visibility`

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

- Add a fairly distant perspective to each card.
- 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.
- When the card is hovered, flip it back so we see the face.
- 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.
- 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.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`

propertyDefines 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`

propertycontent-box | border-box | fill-box | stroke-box | view-box

change the values