CSS Transforms | CSS Features

`backface-visibility`

Property Baseline: widely availablesince September 2024

MDN The backface-visibility CSS property sets whether the back face of an element is visible when turned towards the user.

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  perspective-origin: 220% 220%;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  background: rgb(0 0 0 / 0.4);
  font-size: 60px;
  color: white;
}

.front {
  transform: translateZ(50px);
}

.back {
  background: rgb(230 0 0);
  color: white;
  transform: rotateY(180deg) translateZ(50px);
}

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

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

<section class="default-example" id="default-example">
  <div id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face bottom">6</div>
  </div>
</section>

Syntax

visible | hidden

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: visible
Applies to: transformable elements
Inherited: no
Percentages: N/A
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting backface-visibility
Chrome	36
Edge	12
Firefox	16
Safari	15.4
Chrome Android	36
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`perspective`

Property Baseline: widely availablesince September 2024

MDN The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

none | <length [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: transformable elements
Inherited: no
Percentages: N/A
Computed value: the keyword none or an absolute length
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting perspective
Chrome	36
Edge	12
Firefox	16
Safari	9
Chrome Android	36
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`perspective-origin`

Property Baseline: widely availablesince September 2024

MDN The perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  perspective: 250px;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

<position>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 50% 50%
Applies to: transformable elements
Inherited: no
Percentages: refer to the size of the reference box
Computed value: see background-position
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting perspective-origin
Chrome	36
Edge	12
Firefox	16
Safari	9
Chrome Android	36
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`rotate`

Property Baseline: widely availablesince February 2025

MDN The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property.

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

none | <angle> | [ x | y | z | <number>{3} ] && <angle>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: transformable elements
Inherited: no
Percentages: n/a
Computed value: the keyword none, or an <angle> with an axis consisting of a list of three <number>s
Canonical order: per grammar
Animation type: as SLERP, but see below for none

Browser support

First browser version supporting rotate
Chrome	104
Edge	104
Firefox	72
Safari	14.1
Chrome Android	104
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scale`

Property Baseline: widely availablesince February 2025

MDN The scale CSS property allows you to specify scale transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

none | [ <number> | <percentage> ]{1,3}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: transformable elements
Inherited: no
Percentages: n/a
Computed value: the keyword none, or a list of 3 <number>s
Canonical order: per grammar
Animation type: by computed value, but see below for none

Browser support

First browser version supporting scale
Chrome	104
Edge	104
Firefox	72
Safari	14.1
Chrome Android	104
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`transform`

Property Baseline: widely availablesince March 2018

MDN The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

none | <transform-list>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: transformable elements
Inherited: no
Percentages: refer to the size of reference box
Computed value: as specified, but with lengths made absolute
Canonical order: per grammar
Animation type: transform list, see interpolation rules

Browser support

First browser version supporting transform
Chrome	36
Edge	12
Firefox	16
Safari	9
Chrome Android	36
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`transform-box`

Property Baseline: widely availablesince October 2026 Modern CSS: transform-box

MDN The transform-box CSS property defines the layout box to which the transform, individual transform properties translate, scale, and rotate, and transform-origin properties relate.

Live preview Example from MDN

svg {
  width: 80vh;
  border: 1px solid #d9d9d9;
  position: absolute;
  margin: auto;
  inset: 0;
}

#box {
  transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */
  transform-box: fill-box;
  animation: rotate-box 3s linear infinite;
}

@keyframes rotate-box {
  to {
    transform: rotate(360deg);
  }
}

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <g>
    <circle id="center" fill="red" r="1" transform="translate(25 25)" />
    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
    <rect
      id="box"
      x="10"
      y="10"
      width="10"
      height="10"
      rx="1"
      ry="1"
      stroke="black"
      fill="none" />
  </g>
</svg>

Syntax

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

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: view-box
Applies to: transformable elements
Inherited: no
Percentages: N/A
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting transform-box
Chrome	64
Edge	79
Firefox	55
Safari	11
Chrome Android	64
Safari iOS	11

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`transform-origin`

Property Baseline: widely availablesince March 2018

MDN The transform-origin CSS property sets the origin for an element's transformations.

Live preview Example from MDN

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(30deg);
  }
}

@keyframes rotate3d {
  from {
    transform: rotate3d(0, 0, 0, 0);
  }

  to {
    transform: rotate3d(1, 2, 0, 60deg);
  }
}

#example-container {
  width: 160px;
  height: 160px;
  position: relative;
}

#example-element {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  background: #f7ebee;
  color: black;
  font-size: 1.2rem;
  text-transform: uppercase;
}

#example-element.rotate {
  animation: rotate 1s forwards;
}

#example-element.rotate3d {
  animation: rotate3d 1s forwards;
}

#crosshair {
  width: 24px;
  height: 24px;
  opacity: 0;
  position: absolute;
}

#static-element {
  width: 100%;
  height: 100%;
  position: absolute;
  border: dotted 3px #ff1100;
}

<section id="default-example">
  <div id="example-container">
    <div id="example-element">Rotate me!</div>
    <img
      alt=""
      id="crosshair"
      src="https://developer.mozilla.org/shared-assets/images/examples/crosshair.svg"
      width="24px" />
    <div id="static-element"></div>
  </div>
</section>

const crosshair = document.getElementById("crosshair");
const el = document.getElementById("example-element");

function update() {
  const selected = document.querySelector(".selected");

  /* Restart the animation
           https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Tips */
  el.className = "";
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      el.className =
        el.style.transformOrigin.split(" ")[2] === "60px"
          ? "rotate3d"
          : "rotate";
    });
  });

  const transformOrigin = getComputedStyle(el).transformOrigin;
  const pos = transformOrigin.split(/\s+/);
  crosshair.style.left = `calc(${pos[0]} - 12px)`;
  crosshair.style.top = `calc(${pos[1]} - 12px)`;
}

const observer = new MutationObserver(() => {
  update();
});

observer.observe(el, {
  attributes: true,
  attributeFilter: ["style"],
});

update();
crosshair.style.opacity = "1";

Syntax

[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? | [ [ center | left | right ] && [ center | top | bottom ] ] <length>?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 50% 50%
Applies to: transformable elements
Inherited: no
Percentages: refer to the size of reference box
Computed value: see background-position
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting transform-origin
Chrome	36
Edge	12
Firefox	16
Safari	9
Chrome Android	36
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`transform-style`

Property Baseline: widely availablesince September 2024

MDN The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

Live preview Example from MDN

.layer {
  background: #623e3f;
  border-radius: 0.75rem;
  color: white;
  transform: perspective(200px) rotateY(30deg);
}

.numeral {
  background-color: #ffba08;
  border-radius: 0.2rem;
  color: black;
  margin: 1rem;
  padding: 0.2rem;
  transform: rotate3d(1, 1, 1, 45deg);
}

<section class="default-example" id="default-example">
  <div class="transition-all layer" id="example-element">
    <p>Parent</p>
    <div class="numeral"><code>rotate3d(1, 1, 1, 45deg)</code></div>
  </div>
</section>

Syntax

flat | preserve-3d

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: flat
Applies to: transformable elements
Inherited: no
Percentages: N/A
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting transform-style
Chrome	36
Edge	12
Firefox	16
Safari	9
Chrome Android	36
Safari iOS	9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`translate`

Property Baseline: widely availablesince February 2025

MDN The translate CSS property allows you to specify translation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

none | <length-percentage> [ <length-percentage> <length>? ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: transformable elements
Inherited: no
Percentages: relative to the width of the reference box (for the first value) or the height (for the second value)
Computed value: the keyword none or a pair of computed <length-percentage> values and an absolute length
Canonical order: per grammar
Animation type: by computed value, but see below for none

Browser support

First browser version supporting translate
Chrome	104
Edge	104
Firefox	72
Safari	14.1
Chrome Android	104
Safari iOS	14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`matrix()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

/* for transform */
matrix( <number>#{6} )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting matrix()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`matrix3d()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

matrix3d( <number>#{16} )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting matrix3d()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`perspective()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

perspective( [ <length [0,∞]> | none ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting perspective()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`rotate()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

/* for transform */
rotate( [ <angle> | <zero> ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting rotate()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`rotate3d()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting rotate3d()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`rotateX()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

rotateX( [ <angle> | <zero> ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting rotateX()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`rotateY()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

rotateY( [ <angle> | <zero> ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting rotateY()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`rotateZ()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

rotateZ( [ <angle> | <zero> ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting rotateZ()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scale()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

scale( [ <number> | <percentage> ]#{1,2} )

/* for transform */
scale( <number> , <number>? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting scale()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`scale3d()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

scale3d( [ <number> | <percentage> ]#{3} )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting scale3d()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`scaleX()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

scaleX( [ <number> | <percentage> ] )

/* for transform */
scaleX( <number> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting scaleX()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`scaleY()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

scaleY( [ <number> | <percentage> ] )

/* for transform */
scaleY( <number> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting scaleY()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`scaleZ()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

scaleZ( [ <number> | <percentage> ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting scaleZ()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`skew()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

/* for transform */
skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting skew()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`skewX()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

/* for transform */
skewX( [ <angle> | <zero> ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting skewX()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`skewY()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

/* for transform */
skewY( [ <angle> | <zero> ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting skewY()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`translate()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

<section id="default-example">
  <img
    class="transition-all"
    id="static-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

/* for transform */
translate( <length-percentage> , <length-percentage>? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting translate()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`translate3d()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

translate3d( <length-percentage> , <length-percentage> , <length> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting translate3d()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`translateX()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

<section id="default-example">
  <img
    class="transition-all"
    id="static-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

/* for transform */
translateX( <length-percentage> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting translateX()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`translateY()`

Function Baseline: widely availablesince March 2018

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

Live preview Example from MDN

#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

<section id="default-example">
  <img
    class="transition-all"
    id="static-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

/* for transform */
translateY( <length-percentage> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting translateY()
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Defined for

transform

This feature only appears in the context of these properties, functions or types.

Specification ↗ MDN reference ↗

`translateZ()`

Function Baseline: widely availablesince September 2024

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

Live preview Example from MDN

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

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

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

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

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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>
  </div>
</section>

Syntax

translateZ( <length> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting translateZ()
Chrome	12
Edge	12
Firefox	10
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<transform-function>`

Type Baseline: widely availablesince March 2018

Spec The value of the transform property is a list of <transform-function>. The set of allowed transform functions is given below. Wherever <angle> is used in this specification, a <number> that is equal to zero is also allowed, which is treated the same as an angle of zero degrees. A percentage for horizontal translations is relative to the width of the reference box. A percentage for vertical translations is relative to the height of the reference box. A percentage in a scale function is equivalent to a number, and serializes as a number in specified values. For example, scale3d(50%, 100%, 150%) serializes as scale3d(0.5, 1, 1.5).

MDN The <transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property.

Live preview Example from MDN

main {
  width: 400px;
  height: 200px;
  padding: 50px;
  background-image: linear-gradient(135deg, white, cyan, white);
}

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

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

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

.select-form {
  margin-top: 50px;
}

<main>
  <section id="example-element">
    <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>

  <div class="select-form">
    <label for="transfunction">Select a transform function</label>
    <select id="transfunction">
      <option selected>Choose a function</option>
      <option>rotate(360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateZ(360deg)</option>
      <option>rotate3d(1, 1, 1, 90deg)</option>
      <option>scale(1.5)</option>
      <option>scaleX(1.5)</option>
      <option>scaleY(1.5)</option>
      <option>scaleZ(1.5)</option>
      <option>scale3d(1, 1.5, 1.5)</option>
      <option>skew(17deg, 13deg)</option>
      <option>skewX(17deg)</option>
      <option>skewY(17deg)</option>
      <option>translate(100px, 100px)</option>
      <option>translateX(100px)</option>
      <option>translateY(100px)</option>
      <option>translateZ(100px)</option>
      <option>translate3d(50px, 50px, 50px)</option>
      <option>perspective(200px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
    </select>
  </div>
</main>

const selectElem = document.querySelector("select");
const example = document.querySelector("#example-element");

selectElem.addEventListener("change", () => {
  if (selectElem.value === "Choose a function") {
    return;
  }
  example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
  setTimeout(() => {
    example.style.transform = "rotate3d(1, 1, 1, 30deg)";
  }, 2000);
});

Syntax

<scale3d()> | <scale()> | <scaleX()> | <scaleY()> | <scaleZ()> | <translate3d()> | <translate()> | <translateX()> | <translateY()> | <translateZ()> | <rotate3d()> | <rotate()> | <rotateX()> | <rotateY()> | <rotateZ()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <matrix()> | <perspective()>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting <transform-function>
Chrome	1
Edge	12
Firefox	3.5
Safari	3.1
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

Each feature in detail

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Browser support

Defined for

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Defined for

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Defined for

Syntax

Browser support

Syntax

Browser support

Defined for

Syntax

Browser support

Defined for

Syntax

Browser support

Syntax

Browser support

Defined for

Syntax

Browser support

Defined for

Syntax

Browser support

Defined for

Syntax

Browser support

Defined for

Syntax

Browser support

Syntax

Browser support

Defined for

Syntax