Question

我正试图点击按钮翻转和翻转图像/ div。

我使用scaleX and scaleY属性，但它的工作原理却不符合我想要的方式。

基本上当我点击Flip或Flop时，scaleX或scaleY位置将会丢失。这意味着它一次只能将1个应用于div。

这里有一个jsfiddle：

点击翻转或翻转（无关紧要），然后点击另一个按钮，您将看到第一个按钮操作丢失。

这是我的代码：

$('#flip').click(function(e){
    //$("#droppable .selected img").addClass('drag2');

      $("#myDiv").css({
            "transform": "scaleY(-1)",
            "-moz-transform": "scaleY(-1)",
            "-o-transform": "scaleY(-1)",
            "-webkit-transform": "scaleY(-1)",
            "filter": "FlipV",
            "-ms-filter": "FlipV"
        }
);
});

$('#flop').click(function(e){
    //$("#droppable .selected img").addClass('drag3');
      $("#myDiv").css({

            "transform": "scaleX(-1)",
            "-moz-transform": "scaleX(-1)",
            "-o-transform": "scaleX(-1)",
            "-webkit-transform": "scaleX(-1)",
            "filter": "FlipH",
            "-ms-filter": "FlipH"

        }
);  

});

Answer 1

var i=-1,j=-1;
$('#flip').click(function(e){
    //$("#droppable .selected img").addClass('drag2');

      $("#myDiv").css({
            "transform": "scaleY("+i+")",
            "-moz-transform": "scaleY("+i+")",
            "-o-transform": "scaleY("+i+")",
            "-webkit-transform": "scaleY("+i+")",
            "filter": "FlipV",
            "-ms-filter": "FlipV"
        }
);
           i=-i;

});

$('#flop').click(function(e){
    //$("#droppable .selected img").addClass('drag3');
      $("#myDiv").css({

            "transform": "scaleX("+j+")",
            "-moz-transform": "scaleX("+j+")",
            "-o-transform": "scaleX("+j+")",
            "-webkit-transform": "scaleX("+j+")",
            "filter": "FlipH",
            "-ms-filter": "FlipH"

        }
);  
    j=-j;

});

工作Fiddle

jQuery：scaleY和scaleX同时？

1 个答案: