Javascript 使用Jquery、css旋转、翻转图像

我使用Jquery和css来实现以下功能

1） 图像翻转（左、右）

2） 图像旋转（左、右）

下图将更好地解释这一点

现在，我使用以下代码来完成此操作

var transform = 180;
var ImgRotate = 0;


    $(".tab_content").hide();
    $(".tab_content:first").show();    
    $('#ibtnFlipRight').click(function () {    
        var Img = $('#ImgPopUpTab2').find('img');
        $(".ImgOfPopUpTab2").css({ 'transform': 'rotateY(' + transform + 'deg)' });
        transform = transform + 180;
    });

    $('#ibtnFlipLeft').click(function () {
        var Img = $('#ImgPopUpTab2').find('img');        
        $(".ImgOfPopUpTab2").css({ 'transform': 'rotateY(' + transform + 'deg)' });
        transform = transform - 180;
    });

    $('#ibtnRotateRight').click(function () {
        ImgRotate = ImgRotate + 90;
        var Img = $('#ImgPopUpTab2').find('img');
        $(".ImgOfPopUpTab2").css({ 'transform': 'rotateZ(' + ImgRotate + 'deg)' });

    });

    $('#ibtnRotateLeft').click(function () {
        ImgRotate = ImgRotate - 90;
        var Img = $('#ImgPopUpTab2').find('img');
        $(".ImgOfPopUpTab2").css({ 'transform': 'rotateZ(' + ImgRotate + 'deg)' });
    });

现在让我们假设我点击旋转右/左 然后单击“翻转”，它将覆盖旋转

所以我需要一个解决方案，使用它，用户可以旋转图像，并可以翻转相同的

---

谢谢

您可以存储指示当前状态（旋转和翻转）的对象。无论何时更改对象，都会重新渲染变换css。你要找的是旋转（x，y，z）

所以我认为你的问题是你不能同时翻转和旋转，一个简单的解决方案是让图像容器旋转并翻转其中的图像，这里是一个示例片段，仅用于演示（使用数据属性保存其当前状态）

var FRAME=$（'#FRAME'）；
函数旋转（角度）
{
var IMAGE=FRAME.find（'img'）；
var isFlipped=FRAME.data（'flipped'）；
如果（isFlipped）角度*=-1；
var angleNow=数字（FRAME.data（'angle'））；
var newAngle=angleNow+angle；
FRAME.data（'angle'，newAngle）；
css（'transform'，'rotate（'+newAngle+'deg'）；
}
函数翻转（）
{
var isFlipped=FRAME.data（'flipped'）；
FRAME.data（'fliped'，！isfliped）；
if（isfliped）FRAME.css（'transform'，'rotateY（0deg）'）；
else FRAME.css（'transform'，'rotateY（180度））；
}

#帧{
显示：内联块；
}
.控制{
z指数：1；
位置：相对位置；
}

向左旋转
右转
轻弹

将其当前旋转（度）和翻转（真/假）保存在img的属性中，如data rot=“90”data fliped=“真”