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

【问题标题】：Rotate , Flip Image using Jquery , css使用 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"

标签： javascript jquery css jquery-plugins

【解决方案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)

【讨论】：