translateY() - CSS: Cascading Style Sheets

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() - CSS: Cascading Style Sheets

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


rotate() - CSS: Cascading Style Sheets

rotate()
========

 The **`rotate()`** CSS function defines a transformation that rotates an element around a
 fixed point on the 2D plane, without deforming it. Its result is a `<transform-function>` data
 type.

Try it
------

 The fixed point that the element rotates around — mentioned above — is also known as the **transform
origin**. This defaults to the center of the element, but you can set your own custom transform origin using
 the `transform-origin` property.

Syntax
------

 The amount of rotation created by `rotate()` is specified by an `<angle>`. If positive,
 the movement will be clockwise; if negative, it will be counter-clockwise. A rotation by 180° is called *point
reflection*.

```css
rotate(a)
```

### Values

*a*

 Is an `<angle>` representing the angle of the rotation. The direction of rotation depends on the writing direction.
 In a left-to-right context, a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In a right-to-left context,
 a positive angle denotes a counter-clockwise rotation, a negative angle a clockwise one.

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

(

cos
(
a
)

-
sin
(
a
)

sin
(
a
)

cos
(
a
)

)

 |

(

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 |

(

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 |

(

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

0

0

0

0

1

)

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

Examples
--------

### Basic example

#### HTML

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

#### CSS

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

.rotated {
  transform: rotate(45deg); /\* Equal to rotateZ(45deg) \*/
  background-color: pink;
}
```

#### Result

### Combining rotation with another transformation

 If you want to apply multiple transformations to an element, be careful about the order in which you specify your
 transformations. For example, if you rotate before translating, the translation will be along the new axis of
 rotation!

#### HTML

```html
<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
```

#### CSS

```css
div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}
```

#### Result

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

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

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


scale() - CSS: Cascading Style Sheets

scale()
=======

 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 [sx, sy], it can resize the horizontal and vertical dimensions at
 different scales. Its result is a `<transform-function>` data type.

Try it
------

 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. A negative value results in a point reflection
 in that dimension. The value `1` has no effect.

**Note:** The `scale()` function only scales in 2D. To scale in 3D, use
 `scale3d()` instead.

Syntax
------

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

```css
scale(sx)

scale(sx, sy)
```

### Values

`sx`

A `<number>` or `<percentage>` representing the abscissa (horizontal, x-component) of the scaling vector.

`sy`

 A `<number>` or `<percentage>` representing the ordinate (vertical, y-component) of the scaling vector.
 If not defined, its default value is `sx`, resulting in a uniform scaling that preserves the element's aspect ratio.

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

(

sx

0

0

sy

)

 |

(

sx

0

0

0

sy

0

0

0

1

)

 |

(

sx

0

0

0

sy

0

0

0

1

)

 |

(

sx

0

0

0

0

sy

0

0

0

0

1

0

0

0

0

1

)

 |
| `[sx 0 0 sy 0 0]` |

Accessibility concerns
----------------------

 Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of
 migraine. If you need to include such animations on your website, you should provide a control to allow users to turn
 off animations, preferably site-wide.

 Also, consider making use of the `prefers-reduced-motion` media feature
 — use it to write a media query that will turn off animations if the
 user has reduced animation specified in their system preferences.

Find out more:

* MDN Understanding WCAG, Guideline 2.3 explanations
* Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1
Examples
--------

### Scaling the X and Y dimensions together

#### HTML

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

#### CSS

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

.scaled {
  transform: scale(0.7); /\* Equal to scaleX(0.7) scaleY(0.7) \*/
  background-color: pink;
}
```

#### Result

### Scaling X and Y dimensions separately, and translating the origin

#### HTML

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

#### CSS

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

.scaled {
  transform: scale(2, 0.5); /\* Equal to scaleX(2) scaleY(0.5) \*/
  transform-origin: left;
  background-color: pink;
}
```

#### Result

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

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

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

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

See also
--------

* `transform`
* `scale`
* `<transform-function>`
* `scale3d()`
* Other individual transform properties `translate` and `rotate`


matrix() - CSS: Cascading Style Sheets

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


matrix3d() - CSS: Cascading Style Sheets

matrix3d()
==========

 The **`matrix3d()`** CSS function defines a 3D transformation as a 4x4 homogeneous matrix.
 Its result is a `<transform-function>` data type.

Try it
------

Syntax
------

The `matrix3d()` function is specified with 16 values. They are described in the column-major order.

```css
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
```

### Values

*a1* *b1* *c1* *d1* *a2* *b2* *c2* *d2*
*a3* *b3* *c3* *d3*

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

*a4* *b4* *c4 d4*

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

| 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 generic 3D
 affine transformation
 can't be represented using a Cartesian-coordinate matrix, as
 translations are not linear transformations.
  |

(

a1

a2

a3

a4

b1

b2

b3

b4

c1

c2

c3

c4

d1

d2

d3

d4

)

 |

Examples
--------

### Cube squashing example

 The following example shows a 3D cube created from DOM elements and transforms, which can be hovered/focused to apply
 a `matrix3d()` transform to it.

#### HTML

```html
<section id="example-element" tabindex="0">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>
```

#### CSS

```css
#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}

#example-element:hover,
#example-element:focus {
  transform: rotate3d(1, 1, 1, 30deg) matrix3d(
      1,
      0,
      0,
      0,
      0,
      1,
      6,
      0,
      0,
      0,
      1,
      0,
      50,
      100,
      0,
      1.1
    );
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}
```

#### Result

### Matrix translation and scale example

Another `transform3d()` example, which implements an animated combined translate and scale.

#### HTML

```html
<div class="foo">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
  soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
  quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
</div>
```

#### CSS

```css
html {
  width: 100%;
}
body {
  height: 100vh;
  /\* Centering content \*/
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
.foo {
  width: 50%;
  padding: 1em;
  color: white;
  background: #ff8c66;
  border: 2px dashed black;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  /\* Setting up animation for better demonstration \*/
  animation: MotionScale 2s alternate linear infinite;
}

@keyframes MotionScale {
  from {
    /\*
 Identity matrix is used as basis here.
 The matrix below describes the
 following transformations:
 Translates every X point by -50px
 Translates every Y point by -100px
 Translates every Z point by 0
 Scales down by 10%
 \*/
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      -50, -100, 0, 1.1
    );
  }
  50% {
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 0.9
    );
  }
  to {
     transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      50, 100, 0, 1.1
    )
  }
}
```

#### Result

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

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

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>`
* Understanding the CSS Transforms Matrix (2012)


translateX() - CSS: Cascading Style Sheets

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() - CSS: Cascading Style Sheets

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() - CSS: Cascading Style Sheets

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() - CSS: Cascading Style Sheets

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


skewY() - CSS: Cascading Style Sheets

skewY()
=======

 The **`skewY()`** CSS function defines a transformation that skews an element in the vertical
 direction 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 vertical direction. The ordinate (vertical, y-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.

Syntax
------

```css
skewY(a)
```

### Values

`a`

Is an `<angle>` representing the angle to use to distort the element along the ordinate (vertical, y-coordinate).

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

(

1

0

tan
(
a
)

1

)

 |

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 |

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 |

(

1

0

0

0

tan
(
a
)

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 tan(a) 0 1 0 0]` |

Examples
--------

### HTML

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

### CSS

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

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}
```

### Result

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

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

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

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

See also
--------

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


translateZ() - CSS: Cascading Style Sheets

translateZ()
============

 The **`translateZ()`** CSS function repositions an element along the z-axis in 3D space, i.e.,
 closer to or farther away from the viewer. Its result is a `<transform-function>` data type.

Try it
------

 This transformation is defined by a `<length>` which specifies how far inward or outward the
 element or elements move.

 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:** `translateZ(tz)` is equivalent to
 `translate3d(0, 0, tz)`.

Syntax
------

```css
translateZ(tz)
```

### Values

`tz`

 A `<length>` representing the z-component of the translating vector [0, 0, tz]. In Cartesian coordinate system it represents shift along z-axis. A positive value moves the
 element towards the viewer, and a negative value farther away.

| 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

0

0

1

0

0

0

0

1

t

0

0

0

1

)

 |

Examples
--------

 In this example, two boxes are created. One is positioned normally on the page, without being translated at all. The
 second is altered by applying perspective to create a 3D space, then moved towards the user.

### HTML

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

### CSS

```css
div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}
```

 What really matters here is the class "moved"; let's take a look at what it does. First, the
 `perspective()` function positions the
 viewer relative to the plane that lies where z=0 (in essence, the surface of the screen). A value of
 `500px` means the user is 500 pixels "in front of" the imagery located at z=0.

 Then, the `translateZ()` function moves the element 200 pixels "outward" from the screen, toward the user.
 This has the effect of making the element appear larger when viewed on a 2D display, or closer when viewed using a VR
 headset or other 3D display device.

 Note if the `perspective()` value is less than the `translateZ()` value, such as
 `transform: perspective(200px) translateZ(300px);` the transformed element will not be visible as it is
 further than the user's viewport. The smaller the difference between the perspective and translateZ values, the closer
 the user is to the element and the larger the translated element will seem.

**Note:** As the composition of transforms isn't commutative, the order you write the different functions is significant. In particular, in general, you want `perspective()` to be placed before `translateZ()`.

### Result

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

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

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

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

See also
--------

* `transform`
* `<transform-function>`
* `translate`


perspective() - CSS: Cascading Style Sheets

perspective()
=============

 The **`perspective()`** CSS function defines a transformation that sets the distance between the
 user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were
 3-dimensional. Its result is a `<transform-function>` data type.

Try it
------

 The `perspective()` transform function is part of the `transform` value applied on the
 element being transformed. This differs from the `perspective` and `perspective-origin`
 properties which are attached to the parent of a child transformed in 3-dimensional space.

Syntax
------

 The perspective distance used by `perspective()` is specified by a `<length>` value,
 which represents the distance between the user and the z=0 plane,
 or by `none`.
 The z=0 plane is the plane where everything appears
 in a 2-dimensional view, or the screen.
 Negative values are syntax errors.
 Values smaller than `1px` (including zero) are clamped to `1px`.
 Values other than `none` cause
 elements with positive z positions to appear larger,
 and elements with negative z positions to appear smaller.
 Elements with z positions equal to or larger than the perspective value
 disappear as though they are behind the user.
 Large values of perspective represent a small transformation;
 small values of `perspective()` represent a large transformation;
 `perspective(none)` represents perspective from infinite distance
 and no transformation.

```css
perspective(d)
```

### Values

*d*

 Is a `<length>` representing the distance from the user to the z=0 plane. If it is 0 or a
 negative value, no perspective transform is applied.

| 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.
  |
 This transformation is not a linear transformation in ℝ^3, and can't be
 represented using a Cartesian-coordinate matrix.
  |

(

1

0

0

0

0

1

0

0

0

0

1

0

0

0

−
1
/
d

1

)

 |

Examples
--------

### HTML

```html
<p>Without perspective:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (9cm):</p>
<div class="perspective-box-far">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (4cm):</p>
<div class="perspective-box-closer">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>
```

### CSS

```css
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}
```

### Result

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

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

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

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

See also
--------

* `transform`
* `<transform-function>`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`


rotate3d() - CSS: Cascading Style Sheets

rotate3d()
==========

 The **`rotate3d()`** CSS function defines a transformation that rotates an element around a
 fixed axis in 3D space, without deforming it. Its result is a `<transform-function>` data type.

Try it
------

 In 3D space, rotations have three degrees of freedom, which together describe a single axis of rotation. The axis of
 rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the `transform-origin`
 property). If, as specified, the vector is not *normalized* (i.e., if the sum of the square of its three
 coordinates is not 1), the user agent will normalize it internally. A non-normalizable vector, such as
 the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invalidating the whole CSS property.

**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 `rotate3d()` is specified by three `<number>`s and
 one `<angle>`. The `<number>`s represent the x-, y-, and z-coordinates of the
 vector denoting the axis of rotation. The `<angle>` represents the angle of rotation; if positive,
 the movement will be clockwise; if negative, it will be counter-clockwise.

```css
rotate3d(x, y, z, a)
```

### Values

`x`

 Is a `<number>` describing the x-coordinate of the vector denoting the axis of rotation which
 can be a positive or negative number.

`y`

 Is a `<number>` describing the y-coordinate of the vector denoting the axis of rotation which
 can be a positive or negative number.

`z`

 Is a `<number>` describing the z-coordinate of the vector denoting the axis of rotation which
 can be a positive or negative number.

`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 |
 This transformation applies to the 3D space and can't be represented on
 the plane.
  |
| Homogeneous coordinates on ℝℙ^2 |
| Cartesian coordinates on ℝ^3 |

(

1
+
(
1
−
cos
(
a
)
)
(

x
2

−
1
)

z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

−
y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

−
z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

y
2

−
1
)

x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

−
x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

z
2

−
1
)

)

\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a))\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a))\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1)\end{pmatrix}

 |
| Homogeneous coordinates on ℝℙ^3 |

(

1
+
(
1
−
cos
(
a
)
)
(

x
2

−
1
)

z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

−
y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

0

−
z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

y
2

−
1
)

x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

0

y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

−
x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

z
2

−
1
)

0

0

0

0

1

)

\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a)) & 0\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a)) & 0\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1) & 0\\0 & 0 & 0 & 1\end{pmatrix}

 |

Examples
--------

### Rotating on the y-axis

#### HTML

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

#### CSS

```css
body {
  perspective: 800px;
}

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

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}
```

#### Result

### Rotating on a custom axis

#### HTML

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

#### CSS

```css
body {
  perspective: 800px;
}

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

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}
```

#### Result

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

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

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


scaleX() - CSS: Cascading Style Sheets

scaleX()
========

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

Try it
------

 It modifies the abscissa (horizontal, x-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 generally not conserved, except for multiples of 90 degrees.
 `scaleX(-1)` defines an axial symmetry, with a vertical axis passing through the origin (as specified by the `transform-origin`
 property).

**Note:** `scaleX(sx)` is equivalent to
 `scale(sx, 1)` or
 `scale3d(sx, 1, 1)`.

Syntax
------

```css
scaleX(s)
```

### Values

`s`

 Is a `<number>` representing the scaling factor to apply on the abscissa (horizontal, x-coordinate) of each point of the
 element.

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

(

s

0

0

1

)

 |

(

s

0

0

0

1

0

0

0

1

)

 |

(

s

0

0

0

1

0

0

0

1

)

 |

(

s

0

0

0

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[s 0 0 1 0 0]` |

Examples
--------

### HTML

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

### CSS

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

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}
```

### Result

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

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

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

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

See also
--------

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


skewX() - CSS: Cascading Style Sheets

skewX()
=======

 The **`skewX()`** CSS function defines a transformation that skews an element in the
 horizontal direction 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 direction. The abscissa (horizontal, x-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.

**Note:** `skewX(a)` is equivalent to
 `skew(a)`.

Syntax
------

```css
skewX(a)
```

### Values

`a`

Is an `<angle>` representing the angle to use to distort the element along the abscissa (horizontal, x-coordinate).

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

(

1

tan
(
a
)

0

1

)

 |

(

1

tan
(
a
)

0

0

1

0

0

0

1

)

 |

(

1

tan
(
a
)

0

0

1

0

0

0

1

)

 |

(

1

tan
(
a
)

0

0

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 0 tan(a) 1 0 0]` |

Examples
--------

### HTML

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

### CSS

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

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

### Result

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

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

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

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

See also
--------

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


rotateZ() - CSS: Cascading Style Sheets

rotateZ()
=========

 The **`rotateZ()`** CSS function defines a transformation that rotates an element around the
 z-axis 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:** `rotateZ(a)` is equivalent to
 `rotate(a)` or
 `rotate3d(0, 0, 1, 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 `rotateZ()` is specified by an `<angle>`. If
 positive, the movement will be clockwise; if negative, it will be counter-clockwise.

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

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 |

(

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

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: rotateZ(45deg);
  background-color: pink;
}
```

### Result

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

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

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


scaleY() - CSS: Cascading Style Sheets

scaleY()
========

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

Try it
------

 It modifies the ordinate (vertical, y-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.
 `scaleY(-1)` defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the `transform-origin`
 property).

**Note:** `scaleY(sy)` is equivalent to
 `scale(1, sy)` or
 `scale3d(1, sy, 1)`.

`transform: rotateX(180deg);` === `transform: scaleY(-1);`

Syntax
------

```css
scaleY(s)
```

### Values

`s`

 Is a `<number>` representing the scaling factor to apply on the ordinate (vertical, y-coordinate) of each point of the
 element.

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

(

1

0

0

s

)

 |

(

1

0

0

0

s

0

0

0

1

)

 |

(

1

0

0

0

s

0

0

0

1

)

 |

(

1

0

0

0

0

s

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 s 0 0]` |

Examples
--------

### HTML

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

### CSS

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

.scaled {
  transform: scaleY(0.6);
  background-color: pink;
}
```

### Result

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

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

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

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

See also
--------

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


Using CSS counters - CSS: Cascading Style Sheets

Using CSS counters
==================

**CSS counters** let you adjust the appearance of content based on its location in a document.
 For example, you can use counters to automatically number the headings in a webpage, or to change the numbering on ordered lists.

 Counters are, in essence, variables maintained by CSS whose values may be incremented or decremented by CSS rules that track how many times they're used.
 You can define your own named counters, and you can also manipulate the `list-item` counter that is created by default for all ordered lists.

Using counters
--------------

 To use a counter it must first be initialized to a value with the `counter-reset` property.
 The counter's value can then be increased or decreased using `counter-increment` property.
 The current value of a counter is displayed using the `counter()` or `counters()` function, typically within a pseudo-element `content` property.

 Counters can only be set, reset, or incremented in elements that generate boxes.
 For example, if an element is set to `display: none` then any counter operation on that element will be ignored.

The properties of counters can be scoped to specific elements using style containment which is described in more detail in the `contain` property.

### Manipulating a counter's value

 To use a CSS counter, it must first be initialized to a value with the `counter-reset` property.
 The property can also be used to change the counter value to any specific number.

Below we initialize a counter named `section` to the default value (0).

```css
counter-reset: section;
```

 You can also initialize multiple counters, optionally specifying an initial value for each.
 Below we initialize the `section` and `topic` counters to the default value, and the `page` counter to 3.

```css
counter-reset: section page 3 topic;
```

 Once initialized, a counter's value can be increased or decreased using `counter-increment`.
 For example, the following declaration would increment the `section` counter by one on every `h3` tag.

```css
h3::before {
  counter-increment: section; /\* Increment the value of section counter by 1 \*/
}
```

You can specify the value to increment or decrement the counter after the counter name, using a positive or negative number.

The counter's name must not be `none`, `inherit`, or `initial`; otherwise the declaration is ignored.

### Displaying a counter

The value of a counter can be displayed using either the `counter()` or `counters()` function in a `content` property.

For example, the following declaration uses `counter()` to prefix each `h3` heading with the text `Section <number>:`, where `<number>` is the value of the count in decimal (the default display style):

```css
h3::before {
  counter-increment: section; /\* Increment the value of section counter by 1 \*/
  content: "Section " counter(section) ": "; /\* Display counter value in default style (decimal) \*/
}
```

 The `counter()` function is used when the numbering of nesting levels does not include the context of parent levels.
 For example, here each nested level restarts from one:
```

1 One
  1 Nested one
  2 Nested two
2 Two
  1 Nested one
  2 Nested two
  3 Nested three
3 Three
```

 The `counters()` function is used when the count for nested levels must include the count from parent levels.
 For example, you might use this to lay out sections as shown:
```

1 One
  1.1 Nested one
  1.2 Nested two
2 Two
  2.1 Nested one
  2.2 Nested two
  2.3 Nested three
3 Three
```

 The `counter()` function has two forms: `counter(<counter-name>)` and `counter(<counter-name>, <counter-style>)`.
 The generated text is the value of the innermost counter of the given name in scope at the pseudo-element.

 The `counters()` function also has two forms: `counters(<counter-name>, <separator>)` and `counters(<counter-name>, <separator>, <counter-style>)`.
 The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string (`<separator>`).

 The counter is rendered in the specified `<counter-style>` for both methods (`decimal` by default).
 You can use any of the `list-style-type` values or your own custom styles.

Examples showing the use of `counter()` and `counters()` are given below in the basic example and Example of a nested counter, respectively.

### Reversed counters

 A reversed counter is one that is intended to count down (decrement) rather than up (increment).
 Reversed counters are created using the `reversed()` function notation when naming the counter in `counter-reset`.

 Reversed counters have a default initial value equal to the number of elements (unlike normal counters, which have a default value of 0).
 This makes it easy to implement a counter that counts from the number of elements down to one.

For example, to create a reversed counter named `section` with a default initial value, you would use the following syntax:

```css
counter-reset: reversed(section);
```

You can of course specify any initial value that you like.

The counter value is decreased by specifying a negative value for `counter-increment`.

**Note:** You can also use `counter-increment` to decrement a non-reversed counter.
 The main benefit of using a reversed counter is the default initial value, and that the `list-item` counter automatically decrements reversed counters.

### List item counters

Ordered lists, as created using `<ol>` elements, implicitly have a counter named `list-item`.

 Like other counters, this has a default initial value of 0 for upward counters and "number of items" for reversed counters.
 Unlike author-created counters, `list-item` *automatically* increments or decrements by one for each list element, depending on whether or not the counter is reversed.

 The `list-item` counter can be used to manipulate the default behavior of ordered lists using CSS.
 For example, you can change the default initial value, or use `counter-increment` to change the way in which the list items increment or decrement.

Examples
--------

### Basic example

This example adds "Section [the value of the counter]:" to the beginning of each heading.

#### CSS

```css
body {
  counter-reset: section; /\* Set a counter named 'section', and its initial value is 0. \*/
}

h3::before {
  counter-increment: section; /\* Increment the value of section counter by 1 \*/
  content: "Section " counter(section) ": "; /\* Display the word 'Section ', the value of
 section counter, and a colon before the content
 of each h3 \*/
}
```

#### HTML

```html
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
```

#### Result

### Basic example: reversed counter

 This example is the same as the one above but uses a reversed counter.
 If your browser supports the `reversed()` function notation, the result will look like this:

![reversed counter](/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters/reversed_headings_basic.png)

#### CSS

```css
body {
  counter-reset: reversed(
    section
  ); /\* Set a counter named 'section', and its initial value is 0. \*/
}

h3::before {
  counter-increment: section -1; /\* Decrement the value of section counter by 1 \*/
  content: "Section " counter(section) ": "; /\* Display the word 'Section ', the value of
 section counter, and a colon before the content
 of each h3 \*/
}
```

#### HTML

```html
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
```

#### Result

### A more sophisticated example

 A counter need not necessarily be shown every time it is incremented.
 This example counts all links with the counter showing only when a link has no text, as a convenient replacement.

#### CSS

```css
:root {
  counter-reset: link;
}

a[href] {
  counter-increment: link;
}

a[href]:empty::after {
  content: "[" counter(link) "]";
}
```

#### HTML

```html
<p>See <a href="https://www.mozilla.org/"></a></p>
<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
<p>See also <a href="https://developer.mozilla.org/"></a></p>
```

#### Result

### Example of a nested counter

 A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements.
 Using the `counters()` function, separating text can be inserted between different levels of nested counters.

#### CSS

```css
ol {
  counter-reset: section; /\* Creates a new instance of the
 section counter with each ol
 element \*/
  list-style-type: none;
}

li::before {
  counter-increment: section; /\* Increments only this instance
 of the section counter \*/
  content: counters(section, ".") " "; /\* Combines the values of all instances
 of the section counter, separated
 by a period \*/
}
```

#### HTML

```html
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item               <!-- 2 -->
    <ol>
      <li>item</li>      <!-- 2.1 -->
      <li>item</li>      <!-- 2.2 -->
      <li>item           <!-- 2.3 -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4 -->
    </ol>
  </li>
  <li>item</li>          <!-- 3 -->
  <li>item</li>          <!-- 4 -->
</ol>
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item</li>          <!-- 2 -->
</ol>
```

#### Result

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # auto-numbering |

See also
--------

* `contain`
* `counter-reset`
* `counter-set`
* `counter-increment`
* `@counter-style`
* CSS counter styles module
* CSS lists and counters module


Using the multi-keyword syntax with CSS display - CSS: Cascading Style Sheets

Using the multi-keyword syntax with CSS display
===============================================

The CSS display module defines a multi-keyword syntax for the CSS `display` property. This guide explains the multi-keyword syntax.

**Note:** multi-keyword syntax is also referred to as "two-value syntax" or "multi-value syntax."

What happens when we change the value of the display property?
--------------------------------------------------------------

One of the first things we learn about CSS is that some elements are block-level and some are inline-level. These are their outer display types. For example, an `<h1>` or a `<p>` are block-level by default, and a `<span>` is inline-level. Using the `display` property we can switch between block and inline. For example to make a heading inline we would use the following CSS:

```css
h1 {
  display: inline;
}
```

The `display` property also lets us use CSS Grid Layout and Flexbox when `display: grid` or `display: flex` is set. The important concept to understand is that changing an element's `display` value can change the formatting context of its direct children. When you use `display: flex` or `display: grid`, the element's children become flex or grid items and respond to the properties in grid and flexbox specifications.

What grid and flexbox demonstrate, however, is that an element has both an **outer** and an **inner** display type. The outer display type describes whether the element is block-level or inline-level. The inner display type describes how the children of that box behave.

As an example, when we use `display: flex` we create a block-level container, with flex children. The children are described as participating in a flex formatting context. You can see this if you take a `<span>` — normally an inline-level element — and apply `display: flex` to it. The `<span>` becomes a block-level element. It behaves as block-level things do in relationship to other boxes in the layout. It's as if you had applied `display: block` to the span, however we also get the changed behavior of the children.

The live example below has a `<span>` with `display: flex` applied. It has become a block-level box taking up all available space in the inline direction. You can now use `justify-content: space-between` to put this space between the two flex items.

It's also possible to create inline flex containers. If you use the single value `inline-flex` you will have an inline-level box with flex children. The children behave in the same way as the flex children of a block-level container. The only thing that has changed is that the parent is now an inline-level box. It therefore behaves like other inline-level things, and doesn't take up the full width (or size in the inline dimension) that a block-level box does. This means that some following text could come up alongside the flex container.

The same is true when working with grid layout. Using `display: grid` will give you a block-level box, which creates a grid formatting context for the direct children. Using `display: inline-grid` will create an inline-level box, which creates a grid formatting context for the children.

Using the multi-keyword syntax
------------------------------

As you can see from the above explanation, the `display` property has considerable powers. In addition to indicating whether something is block-level or inline-level in relationship to other boxes on the page, it also indicates the formatting context inside the box it is applied to. To better describe this behavior, the `display` property allows for two values — an outer and inner value — to be set on it. The original single-value syntax is also valid.

This means that instead of setting `display: flex` to create a block-level box with flex children, we use `display: block flex`. Instead of `display: inline-flex` to create an inline-level box with flex children, we use `display: inline flex`. The example below demonstrates these values.

There are mappings for all of the existing values of `display`; the most common ones are listed in the table below. To see a full list take a look at the table found in the `display` property specification.

| Single value | Multi value |
| --- | --- |
| `block` | `block flow` |
| `flow-root` | `block flow-root` |
| `inline` | `inline flow` |
| `inline-block` | `inline flow-root` |
| `flex` | `block flex` |
| `inline-flex` | `inline flex` |
| `grid` | `block grid` |
| `inline-grid` | `inline grid` |

display: block flow-root and display: inline flow-root
------------------------------------------------------

Regarding how this multi-value syntax helps clarify CSS layout, we can look at some values in the table above that might be less familiar to you. The multi-keyword `display: block flow-root` maps to a single value; `display: flow-root`. This value's only purpose is to create a new Block Formatting Context (BFC). A BFC ensures that everything inside your box stays inside, and things outside the box cannot intrude into it.

 In the example below, two `<p>` elements, one inside a `<div>` demonstrate how display values affect formatting contexts.
 The first `<div>` element with the demo controls is hidden so we can focus on the elements that follow instead.
 The elements that we should focus on are the "parent", "child", and "sibling" `<div>` and `<p>` elements which you can differentiate by their IDs.

 What's notable about this layout is that there is no content between the parent and child elements, and the child element has a top margin applied.
 You might expect the top margin to effectively push the child element down within the parent element, but what happens instead is something called *margin collapse*.
 In this case, the margin of the child element extends well above the parent's bounding box and pushes the parent element further down the page.
 This is easier to see if you inspect the box model of the child element in your browser's developer tools.

 Change the selected option in the `<select>` element to see the effect of different `display` values.
 You can use any value with `flow-root` to create a new formatting context for the parent, making the child element margin relative to its parent's outer edge and avoiding the margin collapse.
 Changing between `display: flow-root` and `display: block flow-root` will achieve the same effect as the single-value `flow-root` keyword.
```

function changeDisplayType() {
  var parentDiv = document.getElementById("parent");
  var siblingDiv = document.getElementById("sibling");
  var displayType = document.getElementById("displayType").value;

  parentDiv.style.display = displayType;
  siblingDiv.style.display = displayType;
}
```

```
#controls {
  padding: 1rem;
  outline: 2px dashed black;
}
body {
  margin: 10px;
  font-family: sans-serif;
}
```

```css
div,
p {
  outline: 2px solid black;
  background-color: cornflowerblue;
  display: block;
  margin-bottom: 2rem;
}

#parent {
  background-color: oldlace;
  min-height: 2rem;
}

#child {
  margin-top: 4rem;
  outline: 2px dashed red;
}

#sibling {
  background-color: lavender;
}
```

```
<div id="controls">
  <label for="displayType">display:</label>
  <select id="displayType" onchange="changeDisplayType()">
    <option value="block">block</option>
    <option value="flow-root">flow-root</option>
    <option value="block flow-root">block flow-root</option>
    <option value="inline">inline</option>
    <option value="inline flow-root">inline flow-root</option>
  </select>
</div>
```

```html
<div id="parent">
  <p id="child">The #child paragraph (nested in #parent).</p>
</div>
<p id="sibling">The #sibling paragraph (sibling of #parent).</p>
```

The `flow-root` value makes sense if you think about block and inline layout, which is sometimes called normal flow. Our HTML page creates a new formatting context (floats and margins cannot extend out from the boundaries) and our content lays out in normal flow, using block and inline layout, unless we change the value of `display` to use some other formatting context. Creating a grid or flex container also creates a new formatting context (a grid or flex formatting context, respectively.) These also contain everything inside them. However, if you want to contain floats and margins but continue using block and inline layout, you can create a new flow root, and start over with block and inline layout. From that point downwards everything is contained inside the new flow root.

This is why `display: flow-root` can be written using the multi-keyword syntax `display: block flow-root`. You are creating a block formatting context, with a block-level box and children participating in normal flow. What about the matched pair `display: inline flow-root`? This is the current way of describing `display: inline-block`.

The value `display: inline-block` has been around since the early days of CSS. The reason we tend to use it is to allow padding to push inline items away from an element, when creating navigation items for example, or when wanting to add a background with padding to an inline element as in the example below.

An element with `display: inline-block` however, will also contain floats. It contains everything inside the inline-level box. Therefore `display: inline-block` does exactly what `display: flow-root` does, but with an inline-level, rather than a block-level box. The two-value syntax accurately describes what is happening with this value. In the example above, you can change `display: inline-block` to `display: inline flow-root` and get the same result.

What about the old values of display?
-------------------------------------

The single values of `display` are described in the specification as legacy values, and currently you gain no benefit from using the multi-keyword versions, as there is a direct mapping for each multi-keyword version to a legacy version, as demonstrated in the table above.

To deal with single values of `display` the specification explains what to do if only the outer value of `block` or `inline` is used:

>
> "If a `<display-outside>` value is specified but `<display-inside>` is omitted, the element's inner display type defaults to flow."
>
>
>

 This means that the behavior is exactly as it is in a single value world. If you specify `display: block` or `display: inline`, that changes the outer display value of the box but any children continue in normal flow.
 If only an inner value of `flex`, `grid`, or `flow-root` is specified then the specification explains that the outer value should be set to `block`:

>
> "If a `<display-inside>` value is specified but `<display-outside>` is omitted, the element's outer display type defaults to block—except for ruby, which defaults to inline."
>
>
>

Finally, we have some legacy pre-composed inline-level values of:

* `inline-block`
* `inline-table`
* `inline-flex`
* `inline-grid`

If a supporting browser comes across these as single values then it treats them the same as the multi-keyword versions:

* `inline flow-root`
* `inline table`
* `inline flex`
* `inline grid`

So all of the current situations are neatly covered, meaning that we maintain compatibility of existing and new sites that use the single values, while allowing the spec to evolve.


Wrapping and breaking text - CSS: Cascading Style Sheets

Wrapping and breaking text
==========================

This guide explains the various ways in which overflowing text can be managed in CSS.

What is overflowing text?
-------------------------

In CSS, if you have an unbreakable string such as a very long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below: the long word is extending past the boundary of the box it is contained in.

CSS will display overflow in this way, because doing something else could cause data loss. In CSS data loss means that some of your content vanishes. So the initial value of `overflow` is `visible`, and we can see the overflowing text. It is generally better to be able to see overflow, even if it is messy. If things were to disappear or be cropped as would happen if `overflow` was set to `hidden` you might not spot it when previewing your site. Messy overflow is at least easy to spot, and in the worst case, your visitor will be able to see and read the content even if it looks a bit strange.

In this next example, you can see what happens if `overflow` is set to `hidden`.

Finding the min-content size
----------------------------

To find the minimum size of the box that will contain its contents with no overflows, set the `width` or `inline-size` property of the box to `min-content`.

Using `min-content` is therefore one possibility for overflowing boxes. If it is possible to allow the box to grow to be the minimum size required for the content, but no bigger, using this keyword will give you that size.

Breaking long words
-------------------

If the box needs to be a fixed size, or you are keen to ensure that long words can't overflow, then the `overflow-wrap` property can help. This property will break a word once it is too long to fit on a line by itself.

**Note:** The `overflow-wrap` property acts in the same way as the non-standard property `word-wrap`. The `word-wrap` property is now treated by browsers as an alias of the standard property.

An alternative property to try is `word-break`. This property will break the word at the point it overflows. It will cause a break-even if placing the word onto a new line would allow it to display without breaking.

In this next example, you can compare the difference between the two properties on the same string of text.

This might be useful if you want to prevent a large gap from appearing if there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after.

In the example below there is a checkbox and label. Let's say, you want the label to break should it be too long for the box. However, you don't want it to break directly after the checkbox.

Adding hyphens
--------------

To add hyphens when words are broken, use the CSS `hyphens` property. Using a value of `auto`, the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. To have some control over the process, use a value of `manual`, then insert a hard or soft break character into the string. A hard break (`‐`) will always break, even if it is not necessary to do so. A soft break (``) only breaks if breaking is needed.

You can also use the `hyphenate-character` property to use the string of your choice instead of the default hyphenation character at the end of the line (before the hyphenation line break) for the language. The `auto` value selects the correct value to mark a mid-word line break according to the typographic conventions of the current content language.

CSS provides additional hyphenation control: the `hyphenate-limit-chars` property can be used to set the minimum word length that allows for hyphenation as well as the minimum number of characters before and after the hyphen.

The `<wbr>` element
-------------------

If you know where you want a long string to break, then it is also possible to insert the HTML `<wbr>` element. This can be useful in cases such as displaying a long URL on a page. You can then add the property in order to break the string in sensible places that will make it easier to read.

In the below example the text breaks in the location of the `<wbr>`.

See also
--------

* The HTML `<wbr>` element
* The CSS `word-break` property
* The CSS `overflow-wrap` property
* The CSS `white-space` property
* The CSS `text-wrap` property
* The CSS `hyphens` property
* The CSS `hyphenate-character` property
* The CSS `hyphenate-limit-chars` property
* Overflow and Data Loss in CSS


inherits - CSS: Cascading Style Sheets

inherits
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`inherits`** CSS descriptor is required when using the `@property` at-rule and controls whether the custom property registration specified by `@property` inherits by default.

Syntax
------

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}
```

Values
------

`true`

The property inherits by default.

`false`

The property does not inherit by default.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@property` |
| Initial value | `auto` |
| Computed value | as specified |

Formal syntax
-------------
```

inherits =
  true   |
  false

```

Examples
--------

Add type checking to `--my-color` `custom property`, as a color, a default value, and not allow it to inherit its value:

Using CSS `@property` at-rule:

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

Using JavaScript `CSS.registerProperty()`:

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

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

| Specification |
| --- |
| CSS Properties and Values API Level 1 # inherits-descriptor |

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

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

See also
--------

* CSS Properties and Values API
* CSS Painting API
* CSS Typed Object Model
* Houdini APIs


initial-value - CSS: Cascading Style Sheets

initial-value
=============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`initial-value`** CSS descriptor is required when using the `@property` at-rule unless the syntax accepts any valid token stream. It sets the initial-value for the property.

The value chosen as the `initial-value` must parse correctly according to the syntax definition. Therefore, if syntax is `<color>` then the initial-value must be a valid `color` value.

Syntax
------

```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}
```

Values
------

A string with a value which is a correct value for the chosen `syntax`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@property` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

Formal syntax
-------------
```

initial-value =
  <declaration-value>?

```

Examples
--------

Add type checking to `--my-color` `custom property`, as a color, the initial-value being a valid color:

Using CSS `@property` at-rule:

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

Using JavaScript `CSS.registerProperty()`:

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

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

| Specification |
| --- |
| CSS Properties and Values API Level 1 # initial-value-descriptor |

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

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

See also
--------

* CSS Properties and Values API
* CSS Painting API
* CSS Typed Object Model
* Houdini APIs


syntax - CSS: Cascading Style Sheets

syntax
======

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`syntax`** CSS descriptor is required when using the `@property` at-rule and describes the allowable syntax for the property.

Syntax
------

The following are all valid syntax strings:

```css
syntax: "<color>"; /\* accepts a color \*/

syntax: "<length> | <percentage>"; /\* accepts lengths or percentages but not calc expressions with a combination of the two \*/

syntax: "small | medium | large"; /\* accepts one of these values set as custom idents. \*/

syntax: "\*"; /\* any valid token \*/
```

Values
------

A string with a supported syntax as defined by the specification. Supported syntaxes are a subset of CSS types. These may be used along, or a number of types can be used in combination.

`"<length>"`

Any valid `<length>` values.

`"<number>"`

Any valid `<number>` values.

`"<percentage>"`

Any valid `<percentage>` values.

`"<length-percentage>"`

Any valid `<length-percentage>` values.

`"<color>"`

Any valid `<color>` values.

`"<image>"`

Any valid `<image>` values.

`"<url>"`

Any valid `url()` values.

`"<integer>"`

Any valid `<integer>` values.

`"<angle>"`

Any valid `<angle>` values.

`"<time>"`

Any valid `<time>` values.

`"<resolution>"`

Any valid `<resolution>` values.

`"<transform-function>"`

Any valid `<transform-function>` values.

`"<custom-ident>"`

Any valid `<custom-ident>` values.

`"<transform-list>"`

A list of valid `<transform-function>` values.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@property` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

Formal syntax
-------------
```

syntax =
  <string>

```

Examples
--------

Add type checking to `--my-color` `custom property`, using the `<color>` syntax:

Using CSS `@property` at-rule:

```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

Using JavaScript `CSS.registerProperty()`:

```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

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

| Specification |
| --- |
| CSS Properties and Values API Level 1 # the-syntax-descriptor |

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

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

See also
--------

* CSS Properties and Values API
* CSS Painting API
* CSS Typed Object Model
* Houdini APIs


Using feature queries - CSS: Cascading Style Sheets

Using feature queries
=====================

**Feature queries** are conditional group rules that test whether the user agent supports or doesn't support one or more CSS features, such as CSS properties and property values. Feature queries give web developers a way to test to see if a browser has support for a certain feature, and then provide CSS that will only run based on the result of that test. In this guide, you will learn how to implement progressive enhancement using feature queries.

Feature queries are created using the CSS at-rule `@supports` (or the `supports()` function within `@import` at-rules).

Syntax
------

CSS feature queries are part of the CSS conditional rules module, which also defines the media query `@media` at-rule. Feature queries behave similarly to media queries. The difference is that with a media query, you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for CSS features.

A feature query consists of the `@supports` at-rule followed by the support condition or a `supports()` function and declaration parameter within an `@import` at-rule declaration:

```css
/\* `@supports` at-rule \*/
@supports <support-condition> {
  CSS rules to apply
}

/\* `supports()` function \*/
@import url\_to\_import supports(<declaration>);
```

For example, we can apply a set of styles or import an entire stylesheet if the user-agent supports `red` as a valid value for the CSS `color` property:

```css
/\* `@supports` at-rule \*/
@supports (color: red) {
  CSS rules to apply
}

/\* `supports()` function \*/
@import `/css/styles.css` supports(color: red);
```

As another example, if you want to check if a browser supports the `row-gap` property you would write the following feature query. It doesn't matter which value you use in a lot of cases: if all you want is to check that the browser supports this property, then any valid value will do.

The value part of the property-value pair matters more if you are testing for new values of a particular property. All browsers support `color: red`: this dates back to CSS1. However, there are often additional values added to properties in CSS, like relative colors, which may not be supported. Feature queries enable testing property and value pairs, meaning we can detect support for values.

Expanding on the `color` property example above, here we check if the browser supports the `color: AccentColor` declaration:

```css
/\* `@supports` at-rule \*/
@supports (color: AccentColor) {
  CSS rules to apply
}

/\* `supports()` function \*/
@import `/css/styles.css` supports(color: AccentColor);
```

In these examples, we've used feature queries to check if the user-agent supports a specific value of a CSS property, listing the single declaration within parenthesis. You can test for multiple property values or the lack of support.

Testing for lack of support
---------------------------

In addition to asking the browser if it supports a feature, you can test for the opposite by adding in the `not` keyword:

```css
/\* `@supports` at-rule with `not` \*/
@supports not (property: value) {
  CSS rules to apply
}
```

The CSS inside the following example feature query will run if the browser does not support `row-gap`.

Testing for more than one feature
---------------------------------

You may need to test support for more than one property in your feature query. To do so, you can include a list of features to test for, separated by `and` keywords:

```css
/\* multiple feature `@supports` at-rule \*/
@supports (property1: value) and (property2: value) {
  CSS rules to apply
}
```

For example, if the CSS you want to run requires that the browser supports CSS Shapes and CSS Grid, you could create a rule that tests browser support for both of these features. The following rule will only return true if `shape-outside: circle()` and `display: grid` are both supported by the browser.

Testing for at least one of multiple features
---------------------------------------------

You can also use `or` to apply CSS only if one or more declarations are supported:

```css
/\* any feature `@supports` at-rule \*/
@supports (property1: value) or (property2: value) {
  CSS rules to apply
}
```

This can be particularly useful if a feature is vendor prefixed, as you can test for the standard property plus any vendor prefixes.

Additional feature query options
--------------------------------

Feature queries are not limited to property-value pairs. You can include `font-tech()`, `font-format()`, and `selector()` functions in your feature queries to selectively apply CSS based on whether the user-agent supports a specified font technology, font format, or selector syntax, respectively.

For example, the `selector()` function can be used to import a stylesheet for browsers that support a vendor-prefixed pseudo-element:

```css
/\* A `selector()` query within a `supports()` function \*/
@import `/css/webkitShadowStyles.css` supports(selector(::-webkit-inner-spin-button));
```

Examples
--------

### Browser support test

In this example, we check if the browser supports the `AccentColor` `<system-color>` and use `display: none` to change the default "not supported" message to a "supported" message if the color type is supported.

#### HTML

```html
<p class="accentcolor">
  Your browser does <span>not</span> support <code>AccentColor</code> as a color
  value.
</p>
```

#### CSS

```css
@supports (color: AccentColor) {
  p {
    color: green;
    border: 2px solid;
  }
  span {
    display: none;
  }
}
@supports not (color: AccentColor) {
  p {
    color: red;
  }
}
```

#### Results

Limitations of feature queries
------------------------------

The `@supports` rule tests to see if browsers can parse one or more property/value pairs, and therefore if they claim to support the associated feature(s). If the property/value pairs are understood by a browser it returns a positive response. Feature queries check that declarations are considered valid by a browser, but can't be used to check if it supports a feature properly without bugs or spec violations. Feature queries cannot test for *partial implementations*.

Summary
-------

Feature queries are a useful tool for progressively enhancing a site. They enable you to provide a good solution for all browsers, and an enhanced solution for browsers that support newer properties and values.

You don't need to use feature queries to start using new CSS features; CSS error handling means the browser simply ignores CSS it does not yet recognize. However, feature queries are a useful alternative to fallback declarations, and enable writing code once that can eventually be supported everywhere.

### See also

* CSS conditional rules module
* Using CSS media queries
* Supporting older browsers: feature queries
* Browser feature detection: CSS `@supports`


Guide to scroll anchoring - CSS: Cascading Style Sheets

Guide to scroll anchoring
=========================

As a user of the web, you are probably familiar with the problem that scroll anchoring solves. You browse to a long page on a slow connection and begin to scroll to read the content; while you are busy reading, the part of the page you are looking at suddenly jumps. This has happened because large images or some other elements have just loaded further up in the content.

Scroll anchoring is a browser feature that aims to solve this problem of content jumping, which happens if content loads in after the user has already scrolled to a new part of the document.

How does it work?
-----------------

Scroll anchoring adjusts the scroll position to compensate for the changes outside of the viewport. This means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how *far* they have moved through the document.

How do I turn on scroll anchoring?
----------------------------------

You don't! The feature is enabled by default in supporting browsers. In most cases anchored scrolling is exactly what you want — content jumping is a poor experience for anyone.

What if I need to debug it?
---------------------------

If your page is not behaving well with scroll anchoring enabled, it is probably because some `scroll` event listener is not handling well the extra scrolling to compensate for the anchor node movement.

You can check whether disabling scroll anchoring fixes the issue in Firefox by changing `layout.css.scroll-anchoring.enabled` to `false` in `about:config`.

If it does, you can check what node is Firefox using as the anchor using the `layout.css.scroll-anchoring.highlight` switch. That will show a purple overlay on top of the anchor node.

If one node doesn't seem appropriate to be an anchor, you can exclude it using `overflow-anchor`, as described below.

What if I need to disable it?
-----------------------------

The specification provides a new property, `overflow-anchor`, which can be used to disable scroll anchoring on all or part of the document. It's essentially a way to opt out of the new behavior.

The only possible values are `auto` or `none`:

* `auto` is the initial value; as long as the user has a supported browser the scroll anchoring behavior will happen, and they should see fewer content jumps.
* `none` means that you have explicitly opted the document, or part of the document, out of scroll anchoring.

To opt out the entire document, you can set it on the `<body>` element:

```css
body {
  overflow-anchor: none;
}
```

To opt out a certain part of the document use `overflow-anchor: none` on its container element:

```css
.container {
  overflow-anchor: none;
}
```

**Note:** The specification details that once scroll anchoring has been opted out of, you cannot opt back into it from a child element. For example, if you opt out for the entire document, you will not be able to set `overflow-anchor: auto` elsewhere in the document to turn it back on for a subsection.

### Suppression triggers

The specification also details some *suppression triggers*, which will disable scroll anchoring in places where it might be problematic. If any of the triggers happen on the anchor node, or an ancestor of it, anchoring is suppressed.

These suppression triggers are changes to the computed value of any of the following properties:

* `top`, `left`, `right`, or `bottom`
* `margin` or `padding`
* Any `width` or `height`-related properties
* `transform` and the individual transform properties `translate`, `scale`, and `rotate`

Additionally, `position` changes anywhere inside the scrolling box also disable scroll anchoring.

**Note:** In Firefox bug 1584285 the `layout.css.scroll-anchoring.suppressions.enabled` flag was added to Firefox Nightly in order to allow the disabling of these triggers.

Further reading
---------------

* Explainer document on the WICG site
* Scroll anchoring for web developers on the Chromium blog
* Implement a pin-to-bottom scrolling element using scroll anchoring
Browser compatibility
---------------------

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

### Compatibility notes

If you need to test whether scroll anchoring is available in a browser, use Feature Queries to test support for the `overflow-anchor` property.