4

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

该函数通过将旋转角度应用于矩阵来计算元素位置[cos(angle) sin(angle) -sin(angle) cos(angle) someOtherTrigForZ(angle) someOtherTrigForZ(angle)]..

我正在使用这些 css3 属性创建一个立方体，如果您检查这个 jsfiddleid=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);

我得到的结果是绘制不佳的元素没有对齐；如果您查看立方体表面的边界，这是肉眼可见的。

有谁知道平滑/圆三角计算的方法，这样我的边界就不会起伏不定？

4

1 回答 1

1

在您链接到的 jsfiddle 中，立方体面的 css 类将边框设置为border:1px solid black;这实际上是在面的每个边缘上添加和额外的像素。这是一个额外的 2px 添加到宽度和高度。我认为这是造成错位的原因。如果将 css 属性添加-webkit-box-sizing: border-box;到人脸类，则应更正错位。

于 2013-01-19T01:55:57.353 回答