javascript - 使用 Jquery 旋转，翻转图像，CSS

Question

我正在使用Jquery和css来实现Following

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)' });
    });

现在假设我点击 Rotate Right/Left 然后单击“翻转”，它会覆盖“旋转”。

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

谢谢

Answer 1

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

  var FRAME = $('#frame');
	function rotate(angle)
	{
		var IMAGE = FRAME.find('img');
		var isFlipped = FRAME.data('flipped');
		if(isFlipped)angle*=-1;
		var angleNow = Number(FRAME.data('angle'));
		var newAngle = angleNow + angle;
		FRAME.data('angle',newAngle);
		IMAGE.css('transform','rotate('+newAngle+'deg)');
	}

	function flip()
	{
		var isFlipped = FRAME.data('flipped');
		FRAME.data('flipped',!isFlipped);
		if(isFlipped)FRAME.css('transform','rotateY(0deg)');
		else FRAME.css('transform','rotateY(180deg)');
	}

#frame{
			display: inline-block;
		}
.controls {
    z-index: 1;
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
	<button onclick="rotate(-45)">Rotate Left</button>
	<button onclick="rotate(45)">Rotate Right</button>
	<button onclick="flip()">Flip</button>
</div>
<div id="frame" data-angle="0" data-flipped="false" >
	<img src="https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg">
</div>