recursal/MDN huggingface dataset:
translate()
===========

 The **`translate()`** CSS function repositions an element in the horizontal and/or vertical
 directions. Its result is a `<transform-function>` data type.

Try it
------

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

Syntax
------


```css
/\* Single <length-percentage> values \*/
transform: translate(200px);
transform: translate(50%);

/\* Double <length-percentage> values \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
```

### Values

Single `<length-percentage>` values

 This value is a `<length>` or `<percentage>` representing the abscissa
 (horizontal, x-component) of the translating vector [tx, 0]. The ordinate (vertical, y-component) of the translating
 vector will be set to `0`. For example, `translate(2px)` is equivalent to
 `translate(2px, 0)`. A percentage value refers to the width of the reference box defined by the
 `transform-box` property.


Double `<length-percentage>` values

 This value describes two `<length>` or `<percentage>` values representing
 both the abscissa (horizontal, x-component) and the ordinate (vertical, y-component) of the translating vector [tx, ty]. A percentage as first
 value refers to the width, as second part to the height of the reference box defined by the
 `transform-box` property.




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 
 A translation is not a linear transformation in ℝ^2 and can't be
 represented using a Cartesian-coordinate matrix.
  | 

(

1

0

tx

0

1

ty

0

0

1

)

 | 

(

1

0

tx

0

1

ty

0

0

1

)

 | 

(

1

0

0

tx

0

1

0

ty

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 tx ty]` |

### Formal syntax


```css
translate(<length-percentage>, <length-percentage>?)
```

Examples
--------

### Using a single-axis translation

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* Equal to: translateX(10px) or translate(10px, 0) \*/
  transform: translate(10px);
  background-color: pink;
}
```


#### Result

### Combining y-axis and x-axis translation

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translate |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>`
* `translate`
skew()
======

 The **`skew()`** CSS function defines a transformation that skews an element on the 2D
 plane. Its result is a `<transform-function>` data type.

Try it
------

 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 effect is as if you
 grabbed each corner of the element and pulled them along a certain angle.

 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 the value added to it.

Syntax
------

 The `skew()` function is specified with either one or two values, which represent the amount of skewing to
 be applied in each direction. If you only specify one value it is used for the x-axis and there will be no skewing on
 the y-axis.


```css
skew(ax)

skew(ax, ay)
```

### Values

`ax`

Is an `<angle>` representing the angle to use to distort the element along the x-axis.

`ay`

Is an `<angle>` representing the angle to use to distort the element along the y-axis. If not defined, its default value is `0`, resulting in a purely horizontal skewing.



| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 

(

1

tan
(
ax
)

tan
(
ay
)

1

)

 | 

(

1

tan
(
ax
)

0

tan
(
ay
)

1

0

0

0

1

)

 | 

(

1

tan
(
ax
)

0

tan
(
ay
)

1

0

0

0

1

)

 | 

(

1

tan
(
ax
)

0

0

tan
(
ay
)

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 tan(ay) tan(ax) 1 0 0]` |

Examples
--------

### Skewing on the x-axis only

#### HTML


```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```


#### CSS


```css
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /\* Equal to skewX(10deg) \*/
  background-color: pink;
}
```


#### Result

### Skewing on both axes

#### HTML


```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```


#### CSS


```css
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skew |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>`
* skewX()
* skewY()
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`
    + Note: there is no `skew` property
scale3d()
=========

 The **`scale3d()`** CSS function defines a transformation that resizes an element in 3D space.
 Because the amount of scaling is defined by a vector [sx, sy, sz], it can resize different dimensions at different scales. Its
 result is a `<transform-function>` data type.

Try it
------

 This scaling transformation is characterized by a three-dimensional vector. Its coordinates define how much scaling
 is done in each direction. If all three 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.

Syntax
------

 The `scale3d()` function is specified with three values, which represent the amount of scaling to be
 applied in each direction.


```css
scale3d(sx, sy, sz)
```

### Values

`sx`

Is a `<number>` representing the abscissa (horizontal, x-component) of the scaling vector.

`sy`

Is a `<number>` representing the ordinate (vertical, y-component) of the scaling vector.

`sz`

Is a `<number>` representing the z-component of the scaling vector.



| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented on
 the plane.
  | 

(

sx

0

0

0

sy

0

0

0

sz

)

 | 

(

sx

0

0

0

0

sy

0

0

0

0

sz

0

0

0

0

1

)

 |

Examples
--------

### Without changing the origin

#### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}
```


#### Result

### Translating the origin of the transformation

#### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-scale3d |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>`
* `scaleZ()`
* `translate3d()`
* `rotate3d()`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`
translateY()
============

 The **`translateY()`** CSS function repositions an element vertically on the 2D plane. Its result
 is a `<transform-function>` data type.

Try it
------

**Note:** `translateY(ty)` is equivalent to
 `translate(0, ty)` or
 `translate3d(0, ty, 0)`.


Syntax
------


```css
/\* <length-percentage> values \*/
transform: translateY(200px);
transform: translateY(50%);
```

### Values

`<length-percentage>`

 The value is a `<length>` or `<percentage>` representing the ordinate (vertical, y-coordinate) of the
 translating vector [0, ty]. In Cartesian coordinate system it represents shift along y-axis. A percentage value refers to the height of the reference box defined by the
 `transform-box` property.




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 
 A translation is not a linear transformation in ℝ^2 and can't be
 represented using a Cartesian-coordinate matrix.
  | 

(

1

0

0

0

1

t

0

0

1

)

 | 

(

1

0

0

0

1

t

0

0

1

)

 | 

(

1

0

0

0

0

1

0

t

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 0 t]` |

### Formal syntax


```css
translateY(<length-percentage>)
```

Examples
--------

### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```

### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateY(10px);
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translatey |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>`
* `translate`
rotateX()
=========

 The **`rotateX()`** CSS function defines a transformation that rotates an element around the
 x-axis (horizontal) without deforming it. Its result is a `<transform-function>` data type.

Try it
------

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

**Note:** `rotateX(a)` is equivalent to
 `rotate3d(1, 0, 0, a)`.



**Note:** Unlike rotations in the 2D plane, the composition of 3D rotations is usually
 not commutative. In other words, the order in which the rotations are applied impacts the result.


Syntax
------

 The amount of rotation created by `rotateX()` is specified by an `<angle>`. If
 positive, the movement will be clockwise; if negative, it will be counter-clockwise.


```css
rotateX(a)
```

### Values

`a`

 Is an `<angle>` representing the angle of the rotation. A positive angle denotes a clockwise
 rotation, a negative angle a counter-clockwise one.




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented on
 the plane.
  | 

(

1

0

0

0

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

)

 | 

(

1

0

0

0

0

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

)

 |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateX(45deg);
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatex |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform` property
* `rotate` property
* `<transform-function>`
matrix()
========

 The **`matrix()`** CSS function defines a homogeneous 2D transformation matrix. Its result is
 a `<transform-function>` data type.

Try it
------

**Note:** `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)`.


Syntax
------

 The `matrix()` function is specified with six values. The constant values are implied and not passed as
 parameters; the other parameters are described in the column-major order.


```css
matrix(a, b, c, d, tx, ty)
```

### Values

*a* *b* *c* *d*

Are `<number>`s describing the linear transformation.

*tx* *ty*

Are `<number>`s describing the translation to apply.



| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 

(

a

c

b

d

)

 | 

(

a

c

tx

b

d

ty

0

0

1

)

 | 

(

a

c

tx

b

d

ty

0

0

1

)

 | 

(

a

c

0

tx

b

d

0

ty

0

0

1

0

0

0

0

1

)

 |
| `[a b c d tx ty]` |

 The values represent the following functions:
 `matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())`

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="changed">Changed</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-matrix |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`
* `<transform-function>`
* `matrix3d()`
* Understanding the CSS Transforms Matrix
translateX()
============

 The **`translateX()`** CSS function repositions an element horizontally on the 2D plane. Its
 result is a `<transform-function>` data type.

Try it
------

**Note:** `translateX(tx)` is equivalent to
 `translate(tx, 0)` or
 `translate3d(tx, 0, 0)`.


Syntax
------


```css
/\* <length-percentage> values \*/
transform: translateX(200px);
transform: translateX(50%);
```

### Values

`<length-percentage>`

 Is a `<length>` or `<percentage>` representing the abscissa (horizontal, x-component) of the
 translating vector [tx, 0]. In Cartesian coordinate system it represents shift along x-axis. A percentage value refers to the width of the reference box defined by the
 `transform-box` property.




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 
 A translation is not a linear transformation in ℝ^2 and can't be
 represented using a Cartesian-coordinate matrix.
  | 

(

1

0

t

0

1

0

0

0

1

)

 | 

(

1

0

t

0

1

0

0

0

1

)

 | 

(

1

0

0

t

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 t 0]` |

### Formal syntax


```css
translateX(<length-percentage>)
```

Examples
--------

### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```

### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateX(10px); /\* Equal to translate(10px) \*/
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translatex |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `translate()`
* `translateY()`
* `transform`
* `<transform-function>`
* `translate`
rotateY()
=========

 The **`rotateY()`** CSS function defines a transformation that rotates an element around the
 y-axis (vertical) without deforming it. Its result is a `<transform-function>` data type.

Try it
------

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

**Note:** `rotateY(a)` is equivalent to
 `rotate3d(0, 1, 0, a)`.



**Note:** Unlike rotations in the 2D plane, the composition of 3D rotations is usually
 not commutative. In other words, the order in which the rotations are applied impacts the result.


Syntax
------

 The amount of rotation created by `rotateY()` is specified by an `<angle>`. If
 positive, the movement will be clockwise; if negative, it will be counter-clockwise.


```css
rotateY(a)
```

### Values

`a`

 Is an `<angle>` representing the angle of the rotation. A positive angle denotes a clockwise
 rotation, a negative angle a counter-clockwise one.




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented on
 the plane.
  | 

(

cos
(
a
)

0

sin
(
a
)

0

1

0

-
sin
(
a
)

0

cos
(
a
)

)

 | 

(

cos
(
a
)

0

sin
(
a
)

0

0

1

0

0

-
sin
(
a
)

0

cos
(
a
)

0

0

0

0

1

)

 |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateY(60deg);
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatey |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform` property
* `rotate` property
* `<transform-function>`
translate3d()
=============

 The **`translate3d()`** CSS function repositions an element in 3D space. Its result is a
 `<transform-function>` data type.

Try it
------

 This transformation is characterized by a three-dimensional vector [tx, ty, tz]. Its coordinates define how much the element moves
 in each direction.

Syntax
------


```css
translate3d(tx, ty, tz)
```

### Values

`tx`

 Is a `<length>` or `<percentage>` representing the abscissa (horizontal, x-component) of the
 translating vector [tx, ty, tz].


`ty`

 Is a `<length>` or `<percentage>` representing the ordinate (vertical, y-component)of the
 translating vector [tx, ty, tz].


`tz`

 Is a `<length>` representing the z-component of the translating vector. It can't be a
 `<percentage>` value; in that case the property containing the transform is considered invalid [tx, ty, tz].




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented
 on the plane.
  | 
 A translation is not a linear transformation in ℝ^3 and can't be
 represented using a Cartesian-coordinate matrix.
  | 

(

1

0

0

tx

0

1

0

ty

0

0

1

tz

0

0

0

1

)

 |

Examples
--------

### Using a single axis translation

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* Equivalent to perspective(500px) translateX(10px) \*/
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}
```


#### Result

### Combining z-axis and x-axis translation

#### HTML


```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```


#### CSS


```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-translate3d |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>`
* `translate`
scaleZ()
========

 The **`scaleZ()`** CSS function defines a transformation that resizes an element along the
 z-axis. Its result is a `<transform-function>` data type.

Try it
------

 This scaling transformation modifies the z-coordinate 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. `scaleZ(-1)` defines an axial symmetry, with the z-axis passing through the origin
 (as specified by the `transform-origin` property).

 In the above interactive examples, `perspective: 550px;` (to
 create a 3D space) and `transform-style: preserve-3d;`
 (so the children, the 6 sides of the cube, are also positioned in the 3D space), have been set on the cube.


**Note:** `scaleZ(sz)` is equivalent to
 `scale3d(1, 1, sz)`.


Syntax
------


```css
scaleZ(s)
```

### Values

`s`

 Is a `<number>` representing the scaling factor to apply on the z-coordinate of each point of
 the element.




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented on
 the plane.
  | 

(

1

0

0

0

1

0

0

0

s

)

 | 

(

1

0

0

0

0

1

0

0

0

0

s

0

0

0

0

1

)

 |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="perspective">Translated</div>
<div class="scaled-translated">Scaled</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.perspective {
  /\* Includes a perspective to create a 3D space \*/
  transform: perspective(400px) translateZ(-100px);
  background-color: limegreen;
}

.scaled-translated {
  /\* Includes a perspective to create a 3D space \*/
  transform: perspective(400px) scaleZ(2) translateZ(-100px);
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-scalez |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `scaleX()`
* `scaleY()`
* `transform`
* `<transform-function>`
* `transform-origin`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`
    + Note: there is no `skew` property