## Rotation (2D)

`rotate()`

Rotates an element around a fixed point on the 2D plane.

The `rotate()`

CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. The amount of rotation created by `rotate()`

is specified by an *angle value* expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise. (A rotation by 180° is called point reflection.)

The axis of rotation passes through an origin, defined by the `transform-origin`

CSS property.

— *More info: developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate*

## Rotation (3D)

`rotateX()`

Rotates an element around the horizontal axis.

`rotateX()`

Rotates an element around the horizontal axis.The `rotateX()`

CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. The amount of rotation created by `rotateX()`

is specified by an *angle value* expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

The axis of rotation passes through an origin, defined by the transform-origin CSS property.

`rotateX(a)`

is equivalent to`rotate3d(1, 0, 0, a)`

.

— *More info : developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX*

`rotateY()`

Rotates an element around the vertical axis.

`rotateY()`

Rotates an element around the vertical axis.The `rotateY()`

CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. The amount of rotation created by rotateY() is specified by an *angle value* expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

The axis of rotation passes through an origin, defined by the transform-origin CSS property.

`rotateY(a)`

is equivalent to`rotate3d(0, 1, 0, a)`

.

— *More info : developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY*

`rotateZ()`

Rotates an element around the z-axis.

`rotateZ()`

Rotates an element around the z-axis.The `rotateZ()`

CSS function defines a transformation that rotates an element around the z-axis without deforming it.

The amount of rotation created by rotateZ() is specified by an *angle value* expressed in degrees, gradians, radians, or turns. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

The axis of rotation passes through an origin, defined by the transform-origin CSS property.

`rotateZ(a)`

is equivalent to`rotate(a)`

or`rotate3d(0, 0, 1, a)`

.

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ*

## Perspective

`perspective()`

Sets the distance between the user and the z=0 plane.

The `perspective()`

CSS function defines a transformation that sets the distance between the user and the z=0 plane.

The perspective distance used by `perspective()`

is specified by a *length* value (a number followed by a length unit: em, rem, px, pt, mm…), which represents the distance between the user and the z=0 plane. A positive value makes the element appear closer to the user, a negative value farther.

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective*

## Transform Origin

`transform-origin()`

Sets the origin for an element's transformations.

The transformation origin is the point around which a transformation is applied. For example, the transformation origin of the `rotate()`

function is the center of rotation.

The `transform-origin`

property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.

If two or more values are defined and either no value is a keyword, or the only used keyword is `center`

, then the first value represents the horizontal offset and the second represents the vertical offset.

**One-value syntax:**The value must be a*length*, a*percentage*, or one of the keywords`left`

,`center`

,`right`

,`top`

, and`bottom`

.**Two-value syntax:**One value must be a*length*, a*percentage*, or one of the keywords`left`

,`center`

, and`right`

. The other value must be a*length*, a*percentage*, or one of the keywords`top`

,`center`

, and`bottom`

.**Three-value syntax:**The first two values are the same as for the two-value syntax. The third value must be a*length*. It always represents the`Z offset`

.

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin*

## Scaling (Resizing)

`scale()`

Scales an element up or down on the 2D plane.

`scale()`

Scales an element up or down on the 2D plane.The `scale()`

CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales.

This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation).

When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. If it is negative, the result a point reflection in that dimension. A value of 1 has no effect.

The`scale()`

function only scales in 2D. To scale in 3D, use`scale3d()`

instead.

The `scale()`

function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.

```
scale(sx)
scale(sx, sy)
/*
- sx : A number representing the abscissa of the scaling vector.
- sy : A number representing the ordinate of the scaling vector. If not defined, its default value is sx, resulting in a uniform scaling that preserves the element's aspect ratio.
*/
```

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale*

`scaleX()`

Scales an element up or down horizontally.

`scaleX()`

Scales an element up or down horizontally.The `scaleX()`

CSS function defines a transformation that resizes an element along the x-axis (horizontally).

It modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleX(-1) defines an axial symmetry, with a vertical axis passing through the origin (as specified by the `transform-origin`

property).

`scaleX(sx)`

is equivalent to`scale(sx, 1)`

or`scale3d(sx, 1, 1)`

.

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX*

`scaleY()`

Scales an element up or down vertically.

`scaleY()`

Scales an element up or down vertically.The `scaleY()`

CSS function defines a transformation that resizes an element along the y-axis (vertically).

It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property).

`scaleY(sy)`

is equivalent to`scale(1, sy)`

or`scale3d(1, sy, 1)`

.

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY*

## Translation (Moving)

`translate()`

Translates an element on the 2D plane.

`translate()`

Translates an element on the 2D plane.The `translate()`

CSS function repositions an element in the horizontal and/or vertical directions.

This transformation is characterized by a two-dimensional vector. Its coordinates define how much the element moves in each direction.

The `translate()`

function is specified as either one or two values.

```
translate(tx)
translate(tx, ty)
/*
- tx : Is a length value representing the abscissa (x-coordinate) of the translating vector.
- ty : Is a length value representing the ordinate of the translating vector (or y-coordinate). If unspecified, its default value is 0. For example, translate(2) is equivalent to translate(2, 0).
*/
```

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate*

`translateX()`

Translates an element horizontally.

`translateX()`

Translates an element horizontally.The `translateX()`

CSS function repositions an element horizontally on the 2D plane.

Syntax : `translateX(t)`

. *( t is a length value representing the abscissa of the translating vector.)*

`translateX(tx)`

is equivalent to`translate(tx, 0)`

or`translate3d(tx, 0, 0)`

.

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX*

`translateY()`

Translates an element vertically.

`translateY()`

Translates an element vertically.The `translateY()`

CSS function repositions an element vertically on the 2D plane.

`translateY(ty)`

is equivalent to`translate(0, ty)`

or`translate3d(0, ty, 0)`

.

Syntax : `translateY(t)`

. *( t is a length value representing the ordinate of the translating vector.)*

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY*

## Skewing (Distortion)

`skew()`

Skews an element on the 2D plane.

`skew()`

Skews an element on the 2D plane.The skew() CSS function defines a transformation that skews an element on the 2D plane.

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

The skew() function is specified with either one or two values, which represent the amount of skewing to be applied in each direction.

```
skew(ax)
skew(ax, ay)
/*
- ax : Is an angle value expressed in degrees, gradians, radians, or turns; representing the angle to use to distort the element along the abscissa.
- ay : Is an angle value expressed in degrees, gradians, radians, or turns; representing the angle to use to distort the element along the ordinate. If not defined, its default value is 0, resulting in a purely horizontal skewing.
*/
```

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew*

`skewX()`

: Skews an element in the horizontal direction.

`skewX()`

: Skews an element in the horizontal direction.The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane.

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal direction. The abscissa coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

`skewX(a)`

is equivalent to`skew(a)`

.

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX*

`skewY()`

Skews an element in the vertical direction.

`skewY()`

Skews an element in the vertical direction.The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane.

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the vertical direction. The ordinate coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

— *More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY*