# matrix3d()

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

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%;
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);
}
}
``````

## Specifications

Specification
CSS Transforms Module Level 2
# funcdef-matrix3d

## Browser compatibility

BCD tables only load in the browser