matrix3d() - CSS（层叠样式表） 编辑

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

语法

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

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.

Matrix translation and scale example

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

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

Browser compatibility

Please see the <transform-function> data type for compatibility info.

See also

• transform
• <transform-function>
• Understanding the CSS Transforms Matrix