CSS3 rotate3d不准确

Question

有没有人知道css3转换属性产生的不准确性的解决方案：rotate3d（或rotateX，rotateY，rotateZ）？

该函数通过将旋转角度应用于矩阵[cos(angle) sin(angle) -sin(angle) cos(angle) someOtherTrigForZ(angle) someOtherTrigForZ(angle)] ..

来计算元素位置

我正在使用这些css3属性创建一个多维数据集，如果您检查this jsfiddle中的id=cube元素（使用箭头键旋转多维数据集几次后）（查看计算样式），可以看到rotate3d矩阵不会对计算样式应用任何类型的数字修复（某种舍入方法）。

-webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.04943792709533707, -0.6982520256787774, 0, 0, 0.6982520256787774, 0.04943792709533707, 0, 0, 0, 0, 1);

我得到的结果是没有排列的糟糕元素;如果你看一下立方体脸上的边框，肉眼可以看到这一点。

有没有人知道如何平滑/舍入三角计算以使我的边界不波动？

Answer 1

在你链接到的jsfiddle中，立方体面的css类的边框设置为border:1px solid black;这实际上是在面的每个边上添加和添加额外的像素。这是宽度和高度都增加了2px。我认为这导致了错位。如果将css属性-webkit-box-sizing: border-box;添加到face class，则应更正未对齐。