CSS 函数 - matrix3d（）

CSS 函数 matrix3d（） 类似于 matrix（）函数，但指定由齐次 4x4 矩阵表示的 3D 变换，从而产生数据类型 <transform-matrix>。

可能的值

A1 B1 C1 D1 A2 B2 C2 D2 A3 B3 C3 D3 - 这些是描述线性变换的 <number>。
a4 b4 c4 d4 - 这些是描述要应用的翻译的<number>。

语法

matrix3d（） 函数定义有 16 个值，按列优先顺序描述。


matrix3d(a1, b1, c1, d1,	
a2, b2, c2, d2,	
a3, b3, c3, d3,	
a4, b4, c4, d4)

每个参数（a1 到 d4）对应于 4x4 矩阵中的特定值，表示 3D 变换。

ai（其中 i 是行号，范围从 1 到 4）：表示矩阵第 i 行中的元素。
BI（其中 i 是行号，范围从 1 到 4）：表示矩阵第 i 行中的元素。
ci（其中 i 是行号，范围从 1 到 4）：表示矩阵第 i 行中的元素。
di（其中 i 是行号，范围从 1 到 4）：表示矩阵第 i 行中的元素。

CSS matrix3d（） - 基本示例

以下示例演示了 matrix3d（）的用法，还演示了涉及平移和缩放效果的动态动画


<html>
<head>
<style>
	 	html {
	 	 	 width: 100%;
	 	}
	 	body {
	 	 	 height: 100vh;
	 	 	 display: flex;
	 	 	 flex-flow: row wrap;
	 	 	 justify-content: center;
	 	 	 align-content: center;
	 	}
	 	.box {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 background: #FFAC1C;
	 	 	 border-radius: 20px;
	 	 	 text-align: center;
	 	 	 line-height: 150px;
	 	 	 color: white;
	 	 	 font-family: Arial, sans-serif;
	 	 	 font-size: 18px;
	 	 	 animation: RotateScale 2s alternate linear infinite;
	 	}
	 	@keyframes RotateScale {
	 	 	 from {
	 	 	 transform: matrix3d(
	 	 	 1, 0, 0, 0,
	 	 	 0, 1, 0, 0,
	 	 	 0, 0, 1, 0,
	 	 	 0, 0, 0, 1
	 	 	 );
	 	 	 }
	 	 	 to {
	 	 	 transform: matrix3d(
	 	 	 1.2, 0, 0, 0,
	 	 	 0, 1.2, 0, 0,
	 	 	 0, 0, 1.2, 0,
	 	 	 0, 0, 0, 1
	 	 	 );
	 	 	 }
	 	}
</style>
</head>
<body>
<div class="box">
	 	matrix3d() example
</div>
</body>
</html>

CSS matrix3d（） - 3d 立方体

该示例演示了一个由 DOM 元素和转换组成的 3d 立方体。当悬停或聚焦时，可以使用 matrix3d（）交互转换它。


<html>
<head>
<style>
	 	#custom-cube {
	 	 	 width: 150px;
	 	 	 height: 150px;
	 	 	 transform-style: preserve-3d;
	 	 	 transition: transform 1s;
	 	 	 transform: rotate3d(1, 1, 1, 45deg);
	 	 	 margin: 50px auto;
	 	}
	 	#custom-cube:hover,
	 	#custom-cube:focus {
	 	 	 transform: rotate3d(1, 1, 1, 45deg) matrix3d(
	 	 	 1,
	 	 	 0,
	 	 	 0,
	 	 	 0,
	 	 	 0,
	 	 	 1,
	 	 	 6,
	 	 	 0,
	 	 	 0,
	 	 	 0,
	 	 	 1,
	 	 	 0,
	 	 	 50,
	 	 	 100,
	 	 	 0,
	 	 	 1.2
	 	 	 );
	 	}
	 	.face {
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 width: 100%;
	 	 	 height: 100%;
	 	 	 position: absolute;
	 	 	 backface-visibility: inherit;
	 	 	 font-size: 40px;
	 	 	 color: #fff;
	 	}
	 	.front {
	 	 	 background: rgba(255, 99, 71, 0.9);
	 	 	 transform: translateZ(75px);
	 	}
	 	.back {
	 	 	 background: rgba(0, 128, 0, 0.9);
	 	 	 transform: rotateY(180deg) translateZ(75px);
	 	}
	 	.right {
	 	 	 background: rgba(255, 165, 0, 0.9);
	 	 	 transform: rotateY(90deg) translateZ(75px);
	 	}
	 	.left {
	 	 	 background: rgba(0, 0, 255, 0.9);
	 	 	 transform: rotateY(-90deg) translateZ(75px);
	 	}
	 	.top {
	 	 	 background: rgba(218, 112, 214, 0.9);
	 	 	 transform: rotateX(90deg) translateZ(75px);
	 	}
	 	.bottom {
	 	 	 background: rgba(255, 0, 255, 0.9);
	 	 	 transform: rotateX(-90deg) translateZ(75px);
	 	}
</style>
</head>
<body>
	 	<section id="custom-cube" tabindex="0">
	 	 	 	 	<div class="face front"> Face A</div>
	 	 	 	 	<div class="face back">Face B</div>
	 	 	 	 	<div class="face right">Face C</div>
	 	 	 	 	<div class="face left">Face D</div>
	 	 	 	 	<div class="face top">Face E</div>
	 	 	 	 	<div class="face bottom">Face F</div>
	 	</section>
</body>
</html>

打印本页