Question

我在尝试在mousemove上旋转元素时遇到问题。我相信这个问题与我的元素比屏幕大得多（在CSS中用vh / vw单位设置）这个事实有关，但基本上元素声音从mousemove中心旋转。

我在这里设置了一个jsFiddle：

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函数时，函数按从左到右的顺序处理。

在您的情况下，您想要的是首先translate元素，然后是rotate它。例如，这个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)');

在mousemove上旋转元素，使其大于视口

1 个答案: