matrix3d()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
尝试一下
transform: matrix3d(
-0.6,
1.34788,
0,
0,
-2.34788,
-0.6,
0,
0,
0,
0,
1,
0,
0,
0,
10,
1
);
transform: matrix3d(
0.5,
0,
-0.866025,
0,
0.595877,
1.2,
-1.03209,
0,
0.866025,
0,
0.5,
0,
25.9808,
0,
15,
1
);
语法
matrix3d()
函数由 16 个值指定,这些值以列优先顺序进行描述。
css
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
值
形式语法
示例
立方体压缩示例
以下示例展示了一个由 DOM 元素和变换创建的 3D 立方体,可以通过悬停或聚焦来应用 matrix3d()
变换。
HTML
html
1
2
3
4
5
6
CSS
css
#example-element {
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: transform 1.5s;
transform: rotate3d(1, 1, 1, 30deg);
margin: 50px auto;
}
#example-element:hover,
#example-element:focus {
transform: rotate3d(1, 1, 1, 30deg)
matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: #fff;
}
.front {
background: rgb(90 90 90 / 70%);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 70%);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
结果
矩阵平移和缩放示例
另一个 transform3d()
示例,演示了结合平移和缩放的动画效果。
HTML
html
那时候他认为必需与重要的是接触大自然,接触曾经生活过、思想过、接触过的前人(如接触哲学、诗歌),现在认为必需、与重要的是人为的规章制度,与跟同事们交往。——列夫·托尔斯泰《复活》
CSS
css
html {
width: 100%;
}
body {
height: 100vh;
/* 内容居中 */
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;
/* 设置动画以便更好地演示 */
animation: MotionScale 2s alternate linear infinite;
}
@keyframes MotionScale {
from {
/*
这里使用了单位矩阵作为基础。
下列矩阵描述了以下变换:
将每个 X 坐标平移 -50px
将每个 Y 坐标平移 -100px
将每个 Z 坐标平移 0
将每个坐标缩小 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
)
}
}
结果
规范
Specification |
---|
CSS Transforms Module Level 2 # funcdef-matrix3d |