perspective在这两种情况下，您都应该做第一个。如果在最后添加它，则将首先进行翻译而无需考虑视角。
如果我们参考规范，我们可以看到如何计算转换矩阵：
转换矩阵是根据transform和transform-origin属性计算的，如下所示：
从身份矩阵开始。
通过计算的变换原点的X和Y进行翻译
从左到右分别乘以变换属性中的每个变换函数
通过求反的转换原点的X和Y值进行转换
正如您在步骤（3）中看到的那样，它是 从左到右的（这是另一个问题，您可以在其中获取更多信息，并了解为什么顺序很重要：使用translate模拟转换原点
在要转换的元素内使用Perspective属性也没有用。
box:nth-child(1):hover { transform: perspective(1000px) translate3d(0, 0, -100px);}box:nth-child(2):hover { transform: perspective(1000px) translate3d(0, 0, 100px);}box { padding: 20px; display: inline-flex; align-items: center; justify-content: center; font-family: monospace; transition: transform .4s; background: rgba(255, 0, 0, 0.3); margin: 20px; font-size: 12px; cursor: pointer;}box:nth-child(2) { background: rgba(0, 0, 255, 0.3);}<box> transform: perspective(1000px) translate3d(0,0,100px);</box><box> transform: perspective(1000px) translate3d(0,0,100px);</box>为了避免与顺序混淆，您可以在父元素BUT中声明可透视对象，因此您需要注意原点，因为它不会相同：
box:nth-child(1):hover { transform:translate3d(0, 0, -100px);}box:nth-child(2):hover { transform:translate3d(0, 0, 100px);}body { perspective:1000px;}box { padding: 20px; display: inline-flex; align-items: center; justify-content: center; font-family: monospace; transition: transform .4s; background: rgba(255, 0, 0, 0.3); margin: 20px; font-size: 12px; cursor: pointer;}box:nth-child(2) { background: rgba(0, 0, 255, 0.3);}<box> transform: perspective(1000px) translate3d(0,0,100px);</box><box> transform: perspective(1000px) translate3d(0,0,100px);</box>
