Question

我正在尝试使用jQuery进行div旋转和增长。这是我的js：

var degrees = Math.random() * 20;

var flag = 0;

$(".rotate").click(function() {
    if (flag == 0) {
        flag = 1;
        $(this).css({
            '-webkit-transform': 'rotate('+degrees+'deg)',
            '-moz-transform': 'rotate('+degrees+'deg)',
            '-ms-transform': 'rotate('+degrees+'deg)',
            '-o-transform': 'rotate('+degrees+'deg)',
            'transform': 'rotate('+degrees+'deg)',

            '-webkit-transform': 'scale(2)',
            '-moz-transform': 'scale(2)',
            '-ms-transform': 'scale(2)',
            '-o-transform': 'scale(2)',
            'transform': 'scale(2)'
        });
        degrees = Math.random() * 20;
    } else {
        flag = 0;
        $(this).css({
            '-webkit-transform': 'rotate(0deg)',
            '-moz-transform': 'rotate(0deg)',
            '-ms-transform': 'rotate(0deg)',
            '-o-transform': 'rotate(0deg)',
            'transform': 'rotate(0deg)'
        });
    };
});

我的问题是旋转工作正常，直到我添加了缩放，此时div将增长，但不会旋转。为什么会这样，我该如何解决？只是添加，在我的CSS中，我已经包含了转换，以便变换动画。这是一个jsfiddle：http://jsfiddle.net/HamishT/4Lhyaxwn/

Answer 1

如果你给同一属性两次，它会被覆盖。试试这个

var degrees = Math.random() * 20;

var flag = 0;

$(".rotate").click(function() {
    if (flag == 0) {
        flag = 1;
        $(this).css({
            '-webkit-transform': 'rotate('+degrees+'deg) scale(2)',
            '-moz-transform': 'rotate('+degrees+'deg) scale(2)',
            '-ms-transform': 'rotate('+degrees+'deg) scale(2)',
            '-o-transform': 'rotate('+degrees+'deg) scale(2)',
            'transform': 'rotate('+degrees+'deg) scale(2)',


        });
        degrees = Math.random() * 20;
    } else {
        flag = 0;
        $(this).css({
            '-webkit-transform': 'rotate(0deg)',
            '-moz-transform': 'rotate(0deg)',
            '-ms-transform': 'rotate(0deg)',
            '-o-transform': 'rotate(0deg)',
            'transform': 'rotate(0deg)'
        });
    };
});

Answer 2

您通过设置两次来覆盖transform属性。将transform的值设置为rotate(xdeg) scale(y)

所以，它看起来像

'transform': 'rotate('+degrees+'deg) scale(2)',

此外，相应地更新浏览器特定属性。 (JSFiddle)

jQuery - 在点击的div上同时缩放和旋转过渡

2 个答案: