jQuery - 为孩子的 CSS 反向旋转获取父母的角度差异

Question

我正在使用 jQuery-ui 插件可旋转：
https://github.com/godswearhats/jquery-ui-rotatable

我的目标是有一个可旋转的父元素，并且子元素是反向旋转的，所以子元素看起来是不旋转的。

标记：

<div class="prop"> // Rotatable element
    <div class="controls"> // Counter-rotated element
        <span class="forward">Forward</span>
        <span class="back">Back</span>
    </div>
</div>

JS：

$('.prop').rotatable({
    stop: function (element, ui) {
        console.log(ui.angle.stop);
    }
});

将 .prop 顺时针旋转一圈并停止每隔一段时间的日志：

0.8878111523002155
2.09755867669314
2.6773906348383703
3.3422210195600486
4.164313303696719
4.679676340815534
5.244536132588575
-0.6508896063585539
-0.19499934637089922
0.2217151122145471 

问题是：

angle 与度数 (360) 有何不同？以及如何计算孩子的 (.controls) 反向旋转，使其看起来固定？

我假设在 .rotate() 的“停止”回调中应用 css 转换是一个合适的解决方案，但我当然愿意接受任何其他建议。

到目前为止我有：

function getCounterRotation(angle){

    return Math.floor(360 - angle * 6 * 10);

}

谢谢！

Answer 1

我做了一个你可以在这里使用的例子：

http://jsfiddle.net/zajo6Lyx/1/

    stop: function(event, ui) {
        $('.controls').css('transform','rotate(' + -ui.angle.stop + 'rad)');
        $('.controls').css('-moz-transform','rotate(' + -ui.angle.stop + 'rad)');
        $('.controls').css('-webkit-transform','rotate(' + -ui.angle.stop + 'rad)');
        $('.controls').css('-o-transform','rotate(' + -ui.angle.stop + 'rad)');
    },

如果你想阻止它，你应该使用这个代码：

        rotate: function(event, ui) {
            $('.controls').css('transform','rotate(' + -ui.angle.current + 'rad)');
            $('.controls').css('-moz-transform','rotate(' + -ui.angle.current + 'rad)');
            $('.controls').css('-webkit-transform','rotate(' + -ui.angle.current + 'rad)');
            $('.controls').css('-o-transform','rotate(' + -ui.angle.current + 'rad)');
        },