| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/matrix | [Back] [Original] |
Get to know MDN better
matrix() CSS functionThis feature is well established and works across many devices and browser versions. Its been available across browsers since July 2015.
The matrix() CSS function defines a homogeneous 2D transformation matrix. Its result is
a <transform-function> data type.
Note:
The matrix(a, b, c, d, tx, ty) function is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
transform: matrix(1.2, 0.2, -1, 0.9, 0, 20);
transform: matrix(0.4, 0, 0.5, 1.2, 60, 10);
transform: matrix(0, 1, 1, 0, 0, 0);
transform: matrix(0.1, 1, -0.3, 1, 0, 0);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
matrix(a, b, c, d, tx, ty)
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.
Are <number>s describing the linear transformation.
Are <number>s describing the translation to apply.
| Cartesian coordinates on ^2 | Homogeneous coordinates on ^2 | Cartesian coordinates on ^3 | Homogeneous coordinates on ^3 |
|---|---|---|---|
| (acbd)\begin{pmatrix} a & c \\ b & d \end{pmatrix} | (actxbdty001)\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right) | (actxbdty001)\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right) | (ac0txbd0ty00100001)\left( \begin{array}{cccc} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right) |
[a b c d tx ty] |
The values represent the following functions:
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).
<matrix()> =This syntax reflects the latest standard as per CSS Transforms Module Level 1. Not all browsers may have implemented every part. See Browser compatibility for support information.
matrix( <number>#{6} )
<div>Normal</div>
<div class="changed">Changed</div>
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.changed {
transform: matrix(1, 2, -1, 1, 80, 80);
background-color: pink;
}
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-matrix |
transform<transform-function>matrix3d()This page was last modified on Apr 18, 2026 by MDN contributors.
-webkit-border-before-webkit-box-reflect-webkit-mask-box-image-webkit-mask-composite-webkit-mask-position-x-webkit-mask-position-y-webkit-mask-repeat-x-webkit-mask-repeat-y-webkit-tap-highlight-color-webkit-text-fill-color-webkit-text-security-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-touch-calloutCustom properties (--*): CSS variablesaccent-coloralignment-baselineallanchor-nameanchor-scopeanimationappearanceaspect-ratiobackdrop-filterbackface-visibilitybackgroundbaseline-shiftbaseline-sourceblock-sizeborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-shapeborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthborderbottomcaption-sidecaretclearclip-pathclip-ruleclipcolorcolumnscontaincontainer-namecontainer-typecontainercontent-visibilitycontentcorner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shapecorner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shapecorner-right-shapecorner-shapecorner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shapecursorcxcyddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfill-opacityfill-rulefillfilterflexfloatflood-colorflood-opacityfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizingfont-palettefont-sizefont-size-adjustfont-smoothfont-stretchfont-stylefont-synthesisfont-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weightfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-weightfont-widthfontforced-color-adjustframe-sizinggapgridhanging-punctuationheighthyphenate-characterhyphenate-limit-charshyphensinitial-letterinline-sizeinsetinteractivityinterpolate-sizeisolationleftletter-spacinglighting-colorlink-parametersmarginmarkermaskmix-blend-modeoffsetopacityorderorphansoutlineoverflowoverlaypaddingpagepaint-orderpath-lengthperspective-originperspectivepointer-eventspositionprint-color-adjustquotesrreading-flowreading-orderresizerightrotaterulerxryscalescroll-behaviorscroll-initial-targetscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-marker-groupscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-target-groupscroll-timelinescroll-timeline-axisscroll-timeline-namespeak-asstop-colorstop-opacitystroketab-sizetable-layouttext-aligntext-align-lasttext-anchortext-autospacetext-boxtext-box-edgetext-box-trimtext-combine-uprighttext-decorationtext-decoration-colortext-decoration-insettext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-spacing-trimtext-transformtext-underline-offsettext-underline-positiontext-wraptext-wrap-modetext-wrap-styletimeline-scopetoptouch-actiontransformtransitiontranslateunicode-bidiuser-modifyuser-selectvector-effectvertical-alignvisibilitywhite-spacewhite-space-collapsewidowswidthwill-changeword-breakword-spacingwriting-modexyz-indexzoom:active-view-transition:active-view-transition-type():active:any-link:autofill:blank:buffering:checked:current:default:defined:dir():disabled:empty:enabled:first-child:first-of-type:first:focus-visible:focus-within:focus:fullscreen:future:has-slotted:has():heading:heading():host-context():host:host():hover:in-range:indeterminate:interest-source:interest-target:invalid:is():lang():last-child:last-of-type:left:link:local-link:modal:muted:not():only-child:only-of-type:open:optional:out-of-range:past:paused:picture-in-picture:placeholder-shown:playing:popover-open:read-only:read-write:required:right:root:scope:seeking:stalled:state():target:user-invalid:user-valid:valid:visited:volume-locked:where():xr-overlay::-webkit-inner-spin-button::-webkit-meter-bar::-webkit-meter-even-less-good-value::-webkit-meter-inner-element::-webkit-meter-optimum-value::-webkit-meter-suboptimum-value::-webkit-progress-bar::-webkit-progress-inner-element::-webkit-progress-value::-webkit-scrollbar::-webkit-search-cancel-button::-webkit-search-results-button::-webkit-slider-runnable-track::-webkit-slider-thumb::after::backdrop::before::checkmark::column::cue::details-content::file-selector-button::first-letter::first-line::grammar-error::highlight()::marker::part()::picker-icon::picker()::placeholder::search-text::selection::slotted()::spelling-error::target-text@charset@color-profile@container@counter-style@custom-media@document@font-face@font-feature-values@font-palette-values@function@import@keyframes@layer@media-moz-device-pixel-ratio-webkit-animation-webkit-device-pixel-ratio-webkit-transform-2d-webkit-transform-3d-webkit-transitionany-hoverany-pointeraspect-ratiocolorcolor-gamutcolor-indexdevice-aspect-ratiodevice-heightdevice-posturedevice-widthdisplay-modedynamic-rangeforced-colorsgridheighthorizontal-viewport-segmentshoverinverted-colorsmonochromeorientationoverflow-blockoverflow-inlinepointerprefers-color-schemeprefers-contrastprefers-reduced-dataprefers-reduced-motionprefers-reduced-transparencyresolutionscanscriptingshapeupdatevertical-viewport-segmentsvideo-dynamic-rangewidth@namespace@page@position-try@property@scope@starting-style@supports@view-transition<absolute-size><alpha-value><angle-percentage><angle><axis><baseline-position><basic-shape><blend-mode><box-edge><calc-keyword><calc-sum><color-interpolation-method><color><content-distribution><content-position><corner-shape-value><custom-ident><dashed-function><dashed-ident><dimension><display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside><easing-function><filter-function><flex><frequency-percentage><frequency><generic-family><gradient><hex-color><hue-interpolation-method><hue><ident><image><integer><length-percentage><length><line-style><line-width><named-color><number><overflow-position><overflow><percentage><position-area><position><ratio><relative-size><resolution><rule-list><self-position><shape><string><system-color><text-edge><time-percentage><time><timeline-range-name><transform-function><url>-moz-image-rect()abs()acos()alpha()anchor-size()anchor()asin()atan()atan2()attr()blur()brightness()calc-size()calc()circle()clamp()color-mix()color()conic-gradient()contrast-color()contrast()cos()counter()counters()cross-fade()cubic-bezier()device-cmyk()drop-shadow()dynamic-range-limit-mix()element()ellipse()env()exp()fit-content()grayscale()hsl()hue-rotate()hwb()hypot()if()image-set()image()inset()invert()lab()lch()light-dark()linear-gradient()linear()log()matrix()matrix3d()max()min()minmax()mod()oklab()oklch()opacity()paint()param()path()perspective()polygon()pow()progress()radial-gradient()random()ray()rect()rem()repeat()repeating-conic-gradient()repeating-linear-gradient()repeating-radial-gradient()rgb()rotate()rotate3d()rotateX()rotateY()rotateZ()round()saturate()scale()scale3d()scaleX()scaleY()scaleZ()sepia()shape()sibling-count()sibling-index()sign()sin()skew()skewX()skewY()sqrt()steps()superellipse()symbols()tan()translate()translate3d()translateX()translateY()translateZ()type()url()var()xywh()Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |