使用Jquery，css旋转，翻转图像

Question

我正在使用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)' });
    });

现在让我说点击旋转右/左 然后单击“翻转”将覆盖“旋转”。

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

由于

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>

Answer 2

您可以存储指示当前状态的对象（旋转和翻转）。每当您更改对象时，都会重新渲染转换css。您要找的是rotate(x, y, z)