我一直在探索在CSS中使用perspective来创建一个多维数据集，希望最终可以对其进行动画处理。
当前，每个面上的每个方块都是绝对定位的CSS 3D变换，但是我想知道是否可以减少使用transform: matrix3d()编写的代码量？
我找不到对我来说有意义的transform: matrix3d()解释，所以我不确定如何使用它，或者实际上是否是我要寻找的。
这是我到目前为止的内容的CodePen-不幸的是，目前它是静态的，因此它不会旋转，但是有6个面。
最佳答案
简短的答案：不，使用matrix3d不会减少太多的代码量。
长答案：您可以将几个transform属性（例如translate，scale，rotation）组合到一个矩阵中。但是，由于matrix3d()需要16个参数，所以我不会再短很多了。
获取matrix3d的参数的简单方法是在浏览器的检查器中选择元素，然后查看计算出的值。
困难的方法是自己计算值。
要计算值，首先要了解每个值的含义。例如，您可以在MDN中查找它们。
您会注意到，使用translate3d和rotationY（例如Codepen中的cubie L8）时，需要在矩阵上调整以下值：
cos(rot) 0 sin(rot) tx
0 1 0 ty
-sin(rot) 0 cos(rot) tz
0 0 0 1
tx，ty，tz是translateZ，translateY和translateX。rot是弧度的rotationY。-90度/ 180 * PI为-1.57079633弧度。
cos（1.57）= 0.00079632671
sin（1.57）=〜1
导致
0.00079632671 0 1 0
0 1 0 100
-1 0 0.00079632671 -100
0 0 0 1
给我们
matrix3d(0.00079632671, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0.00079632671, 0, 0, 100, -100, 1)。您在
matrix3d中带有L边的代码（我还添加了旋转动画）： #wrapper {
width: 100%;
height: 100%;
position: relative;
}
#cube-container {
/*width: 100%;*/
position: absolute;
top: 30%;
left: 30%;
}
#cube-viewport {
perspective: 600px;
perspective-origin: 150px 150px;
max-width: 600px;
}
#cube {
position: relative;
height: 300px;
width: 300px;
transform-style: preserve-3d;
transform-origin: 50% 50% -150px;
animation: rotate 10s infinite linear;
/* opacity: 1;
border: 1px black solid;*/
}
.row {
transform-style: preserve-3d;
transform-origin: 50% 50% -150px;
height: auto;
}
#cube .cubie {
position: absolute;
margin: 1px;
border: 1px solid black;
width: 98px;
height: 98px;
background-size: 100px;
opacity: 1;
z-index: -1;
text-align: center;
font-size: 30px;
transform-origin: 0 0;
}
#cube .cubie.front {
background-color: red;
}
#cube .cubie.back {
background-color: blue;
}
#cube .cubie.right {
background-color: green;
}
#cube .cubie.left {
background-color: orange;
}
#cube .cubie.down {
background-color: yellow;
}
#cube .cubie.top {
background-color: white;
}
.ftl {
transform: rotateX(0) translate3d(0, 0, 0);
}
.fcl {
transform: rotateX(0) translate3d(0, 100px, 0);
}
.fbl {
transform: rotateX(0) translate3d(0, 200px, 0);
}
.ftc {
transform: rotateX(0) translate3d(100px, 0, 0);
}
.fcc {
transform: rotateX(0) translate3d(100px, 100px, 0);
}
.fbc {
transform: rotateX(0) translate3d(100px, 200px, 0);
}
.ftr {
transform: rotateX(0) translate3d(200px, 0, 0);
}
.fcr {
transform: rotateX(0) translate3d(200px, 100px, 0);
}
.fbr {
transform: rotateX(0) translate3d(200px, 200px, 0);
}
.btl {
transform: rotateY(180deg) translate3d(-300px, 0, 300px);
}
.bcl {
transform: rotateY(180deg) translate3d(-300px, 100px, 300px);
}
.bbl {
transform: rotateY(180deg) translate3d(-300px, 200px, 300px);
}
.btc {
transform: rotateY(180deg) translate3d(-200px, 0, 300px);
}
.bcc {
transform: rotateY(180deg) translate3d(-200px, 100px, 300px);
}
.bbc {
transform: rotateY(180deg) translate3d(-200px, 200px, 300px);
}
.btr {
transform: rotateY(180deg) translate3d(-100px, 0, 300px);
}
.bcr {
transform: rotateY(180deg) translate3d(-100px, 100px, 300px);
}
.bbr {
transform: rotateY(180deg) translate3d(-100px, 200px, 300px);
}
.rtl {
transform: rotateY(90deg) translate3d(0, 0, 300px);
}
.rcl {
transform: rotateY(90deg) translate3d(0, 100px, 300px);
}
.rbl {
transform: rotateY(90deg) translate3d(0, 200px, 300px);
}
.rtc {
transform: rotateY(90deg) translate3d(100px, 0, 300px);
}
.rcc {
transform: rotateY(90deg) translate3d(100px, 100px, 300px);
}
.rbc {
transform: rotateY(90deg) translate3d(100px, 200px, 300px);
}
.rtr {
transform: rotateY(90deg) translate3d(200px, 0, 300px);
}
.rcr {
transform: rotateY(90deg) translate3d(200px, 100px, 300px);
}
.rbr {
transform: rotateY(90deg) translate3d(200px, 200px, 300px);
}
.ltl {
transform: matrix3d(0.00079632671, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00079632671, 0, 0, 0, -300, 1);
}
.lcl {
transform: matrix3d(0.00079632671, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00079632671, 0, 0, 100, -300, 1);
}
.lbl {
transform: matrix3d(0.00079632671, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00079632671, 0, 0, 200, -300, 1);
}
.ltc {
transform: matrix3d(0.00079632671, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00079632671, 0, 0, 0, -200, 1);
}
.lcc {
transform: matrix3d(0.00079632671, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00079632671, 0, 0, 100, -200, 1);
}
.lbc {
transform: matrix3d(0.00079632671, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00079632671, 0, 0, 200, -200, 1);
}
.ltr {
transform: matrix3d(0.00079632671, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00079632671, 0, 0, 0, -100, 1);
}
.lcr {
transform: matrix3d(0.00079632671, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00079632671, 0, 0, 100, -100, 1);
}
.lbr {
transform: matrix3d(0.00079632671, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0.00079632671, 0, 0, 200, -100, 1);
}
.utl {
transform: rotateX(90deg) translate3d(0, -300px, 0);
}
.ucl {
transform: rotateX(90deg) translate3d(0, -200px, 0);
}
.ubl {
transform: rotateX(90deg) translate3d(0, -100px, 0);
}
.utc {
transform: rotateX(90deg) translate3d(100px, -300px, 0);
}
.ucc {
transform: rotateX(90deg) translate3d(100px, -200px, 0);
}
.ubc {
transform: rotateX(90deg) translate3d(100px, -100px, 0);
}
.utr {
transform: rotateX(90deg) translate3d(200px, -300px, 0);
}
.ucr {
transform: rotateX(90deg) translate3d(200px, -200px, 0);
}
.ubr {
transform: rotateX(90deg) translate3d(200px, -100px, 0);
}
.dtl {
transform: rotateX(-90deg) translate3d(0, 0, 300px);
}
.dcl {
transform: rotateX(-90deg) translate3d(0, 100px, 300px);
}
.dbl {
transform: rotateX(-90deg) translate3d(0, 200px, 300px);
}
.dtc {
transform: rotateX(-90deg) translate3d(100px, 0, 300px);
}
.dcc {
transform: rotateX(-90deg) translate3d(100px, 100px, 300px);
}
.dbc {
transform: rotateX(-90deg) translate3d(100px, 200px, 300px);
}
.dtr {
transform: rotateX(-90deg) translate3d(200px, 0, 300px);
}
.dcr {
transform: rotateX(-90deg) translate3d(200px, 100px, 300px);
}
.dbr {
transform: rotateX(-90deg) translate3d(200px, 200px, 300px);
}
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
100% {
transform: rotateY(360deg) rotateX(360deg);
}
}<div id="wrapper">
<div id="cube-container">
<div id="cube-viewport">
<div id="cube">
<div class="ftl cubie front">F1</div>
<div class="ftc cubie front">F4</div>
<div class="ftr cubie front">F7</div>
<div class="btl cubie back">B1</div>
<div class="btc cubie back">B4</div>
<div class="btr cubie back">B7</div>
<div class="rtl cubie right">R1</div>
<div class="rtc cubie right">R4</div>
<div class="rtr cubie right">R7</div>
<div class="ltl cubie left">L1</div>
<div class="ltc cubie left">L4</div>
<div class="ltr cubie left">L7</div>
<!-- UP FACE -->
<!-- LEFT COLUMN (L) -->
<div class="utl cubie top">U1</div>
<div class="ucl cubie top">U2</div>
<div class="ubl cubie top">U3</div>
<!-- CENTER COLUMN (C) -->
<div class="utc cubie top">U4</div>
<div class="ucc cubie top">U5</div>
<div class="ubc cubie top">U6</div>
<!-- RIGHT COLUMN (R) -->
<div class="utr cubie top">U7</div>
<div class="ucr cubie top">U8</div>
<div class="ubr cubie top">U9</div>
<!-- END UP FACE -->
<div class="fcl cubie front">F2</div>
<div class="fcc cubie front">F5</div>
<div class="fcr cubie front">F8</div>
<div class="bcl cubie back">B2</div>
<div class="bcc cubie back">B5</div>
<div class="bcr cubie back">B8</div>
<div class="rcl cubie right">R2</div>
<div class="rcc cubie right">R5</div>
<div class="rcr cubie right">R8</div>
<div class="lcl cubie left">L2</div>
<div class="lcc cubie left">L5</div>
<div class="lcr cubie left">L8</div>
<div class="fbl cubie front">F3</div>
<div class="fbc cubie front">F6</div>
<div class="fbr cubie front">F9</div>
<div class="bbl cubie back">B3</div>
<div class="bbc cubie back">B6</div>
<div class="bbr cubie back">B9</div>
<div class="rbl cubie right">R3</div>
<div class="rbc cubie right">R6</div>
<div class="rbr cubie right">R9</div>
<div class="lbl cubie left">L3</div>
<div class="lbc cubie left">L6</div>
<div class="lbr cubie left">L9</div>
<div class="dtl cubie down">D1</div>
<div class="dcl cubie down">D2</div>
<div class="dbl cubie down">D3</div>
<div class="dtc cubie down">D4</div>
<div class="dcc cubie down">D5</div>
<div class="dbc cubie down">D6</div>
<div class="dtr cubie down">D7</div>
<div class="dcr cubie down">D8</div>
<div class="dbr cubie down">D9</div>
</div>
</div>
</div>
</div>