# 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.
Note: 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. $\left(\begin{array}{cccc}a1& a2& a3& a4\\ b1& b2& b3& b4\\ c1& c2& c3& c4\\ d1& d2& d3& d4\end{array}\right)$

## 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%;
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 Status Comment
CSS Transforms Level 2
matrix3d()
Editor's Draft Initial definition

## Browser compatibility

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