javascript - 是 obj.style.WebkitTransform = "rotate("+degree +"deg)";非常精准？

Question

当我以较小的 Angular 值(如 1 度)检查旋转功能时，它是否会不准确？

因为我注意到了这一点，我的计算结果是正确的，但物体有可能或多或少地倾斜了一点。

我用 js-control-css 旋转创建了一个 1 小时的倒计时时钟，但它有一些可能会有点错位，而计算值是正确的。 http://jsbin.com/exIFAPIS/1/ (您可以在名为“sendTime”的 javascript 开头调整开始时间)

谁能帮我解决问题，或者给我一些提示或可能的原因？

非常感谢!

Answer 1

首先，很棒的定时器芽!

整个过程运行良好，事实上，我真的很想解决您的问题，只是为了看到它完美运行。

问题是旋转只偏离了一个度数。这看起来很小，但实际上旋转属性的可行性存在很大的误差。否则在正常的日常应用程序中很容易分辨。例如基本的 90 度和 180 度变换。 181-179 差别很大。

为了说明这一点，请查看这个 fiddle :

http://jsfiddle.net/agconti/x8PFL/1/

html:

<div id="div-1"><p>reference text</p></div>
<div id="div-2"><p>reference text</p></div>
<div id="div-3"><p>reference text</p></div>
<div id="div-4"><p>reference text</p></div>

CSS:

div { 
    width: 100px; 
    height:100px; 
    border: 1px solid black; 
    display:inline-block;
}
p{ margin: 25%; text-decoration:underline;}
#div-2 {
    -webkit-transform: rotate(179deg);
    -moz-transform: rotate(179deg);
    transform: rotate(179deg);
}

#div-3 {
    -webkit-transform: rotate(181deg);
    -moz-transform: rotate(181deg);
    transform: rotate(181deg);
}
#div-3 {
    -webkit-transform: rotate(181deg);
    -moz-transform: rotate(181deg);
    transform: rotate(181deg);
}
#div-3 {
    -webkit-transform: rotate(181deg);
    -moz-transform: rotate(181deg);
    transform: rotate(181deg);
}
#div-4 {
    -webkit-transform: rotate(179.8deg);
    -moz-transform: rotate(179.8deg);
    transform: rotate(179.8deg);
}

您可以看到，即使在 div-4 中也存在一定程度的失真(也就是不完全笔直)。这意味着 rotate 属性在小数点后 1 位上相当准确

(+/- 1 位小数，如果你把它带到 179.9deg)。所以回答你的第一个问题；是的，旋转属性至少精确到 1 度。

因为你的例子偏离了大约 0.5 度(在用眼睛调整之后)，很明显你的计算必须偏离而不是旋转属性，因为 0.5 度完全在属性的公差范围内。[1]

[1](STD +/- 1 deg --> 5 deg 是标准偏差的 5 倍，(这当然是笼统的说法))。

我不排除您的计算中的累积舍入可能会导致错误，考虑到测试，这似乎不太可能。如果你检查你的数学并且仍然遇到错误，为了保护你自己免受精度损失，你可以将你的十进制计算作为整数并将结果除以你的转换值。