matrix3d()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
matrix3d() CSS 函数以 4x4 齐次矩阵的形式定义一个 3D 变换。其结果是一个 <transform-function> 数据类型。
尝试一下
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 ); <section id="default-example"> <img class="transition-all" id="example-element" src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </section> 语法
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
-
描述线性变换的
<number>值。 - a4 b4 c4 d4
-
描述要应用的平移的
<number>值。
形式语法
<matrix3d()> =
matrix3d( <number>#{16} )
示例
立方体压缩示例
以下示例展示了一个由 DOM 元素和变换创建的 3D 立方体，可以通过悬停或聚焦来应用 matrix3d() 变换。
HTML
html
<section id="example-element" tabindex="0"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> 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
<div class="foo"> 那时候他认为必需与重要的是接触大自然，接触曾经生活过、思想过、接触过的前人（如接触哲学、诗歌），现在认为必需、与重要的是人为的规章制度，与跟同事们交往。——列夫·托尔斯泰《复活》 </div> 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 |
浏览器兼容性
参见
transform- 单独的变换属性：
<transform-function>