Is obj.style.WebkitTransform = "rotate("+degree+"deg)"; very accurate?

Question

Will the rotate function be not exactly accurate when I inspect it in small degree values like 1 deg?

Because I noticed that, my calculation results are correct but there are chances the object tilts a little bit more or less.

I create a 1 hour count-down clock with the js-control-css rotation, but it have some chances going a little misalignment, while the calculated values are correct. http://jsbin.com/exIFAPIS/1/ ( you can adjust the start time at the beginning of the javascript called "sendTime")

Could any one help me out or give some hints or possible reasons?

Thanks so much!

Answer 1

First of, awesome timer bud!

The whole thing works pretty well, so well in fact that I really wanted to solve your problem just to see it work perfectly.

The issue is that the rotate is off by only a degree. This seems small but its actually a large margin of error for the rotate property to be viable. Otherwise it'd be easy to tell in normal day to day applications. Such as basic 90 and 180 degree transformations. 181-179 is a big difference.

To illustrate this point check out this 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);
}

You can see that even in div-4 there is a level of distortion (aka its not perfectly straight ). That means that the rotate property is reasonably accurate up to 1 decimal place

( +/- 1 decimal place if you bring it to 179.9deg). So to answer your first question; yes, the rotate property is accurate to at least 1 degree.

Because your example is off by at approximately 0.5 degrees (after adjusting it by eye), it seems clear that your calculation must be off and not the rotate property, since 0.5 degrees is well within the property's tolerance.[1]

[1](STD +/- 1 deg --> 5 deg is 5 times the standard deviation, (this is loosely said of course)).

I'm not ruling out that cumulative rounding from your calculations could cause the error, it seems unlikely given the tests. If you check your math and are still running into the error, to protect yourself against precision loss, you could do you decimal calculations as integers and divide the result for the your transform value.