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

Posted 2023-05-09

【中文标题】使用 Jquery 和 css 旋转、翻转图像

【英文标题】：Rotate , Flip Image using Jquery , css

【发布时间】：2018-02-13 21:40:30

【问题描述】：

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

现在假设我点击向右/向左旋转 然后点击翻转它会覆盖旋转。

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

谢谢

【问题讨论】：

将当前的旋转（度）和翻转（true/false）保存在img的属性中，如data-rot="90" data-flipped="true"

【参考方案1】：

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

  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>

【参考方案2】：

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