matrix3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

CSS 函数 matrix3d() 以 4x4 齐次矩阵的形式定义一个 3D 转换。其结果是一个 <transform-function> 数据类型。

语法

matrix3d() 函数由 16 个参数指定。这些参数以列为主的顺序进行描述。

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

值

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.

备注： Until Firefox 16, Gecko accepted a <length> value for a4, b4 and c4.

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

Matrix translation and scale example

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

See also