javascript - 在 mousemove 上旋转大于视口(viewport)的元素

Question

我在尝试通过 mousemove 旋转元素时遇到问题。我认为这个问题与我的元素比屏幕大得多(在 CSS 中以 vh/vw 单位设置)这一事实有关，但本质上是元素声音从 mousemove 的中心旋转。

我在这里设置了一个 jsFiddle:

https://jsfiddle.net/cLx290p1/

function themeLanding() {
    var graphic = $('.landing-2016');
    if (graphic.length > 0) {
        var offset = graphic.offset();
        function mouse(evt) {
            var centerX = (offset.left) + (graphic.width()/2),
            centerY = (offset.top) + (graphic.height()/2),
            mouseX = evt.pageX,
            mouseY = evt.pageY,
            radians = Math.atan2(mouseX - centerX, mouseY - centerY);
            degree = (radians * (180 / Math.PI) * -1) + 90; 
            graphic.css('-moz-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
            graphic.css('-webkit-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
            graphic.css('-o-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
            graphic.css('-ms-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
            graphic.css('transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
        }
        $(document).mousemove(mouse);
    }
}
themeLanding();

我也应用了相同的想法，没有使用 mousemove 作为调试检查，使用 CSS3 旋转相同的元素。

https://jsfiddle.net/psywr840/1/

这似乎工作正常，所以我不确定哪里出错了。

有什么想法吗？谢谢。

Answer 1

当使用 css transform 函数时，函数按照从左到右的顺序进行处理。

在你的情况下，你想要的是首先翻译元素然后旋转它。例如这个 answer on SO解释类似的东西，只是他们使用比例而不是旋转，但原理是一样的。

所以你想要的是改变转换函数的顺序:

graphic.css('-moz-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('-webkit-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('-o-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('-ms-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');