transform简单实现图片点击旋转

transform简单实现图片点击旋转

图片每点击一次旋转90度

代码实现:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div id="aa">
			<img src="../img/吴亦凡1.jpg" onclick="rotate(this)">
		div>
		<script type="text/javascript" src="jquery-3.4.1.min.js">script>
		<script>
			function getmatrix(a,b,c,d,e,f){  
			var aa=Math.round(180*Math.asin(a)/ Math.PI);  
			var bb=Math.round(180*Math.acos(b)/ Math.PI);  
			var cc=Math.round(180*Math.asin(c)/ Math.PI);  
			var dd=Math.round(180*Math.acos(d)/ Math.PI);  
			var deg=0;  
			if(aa==bb||-aa==bb){  
				deg=dd;  
			}else if(-aa+bb==180){  
				deg=180+cc;  
			}else if(aa+bb==180){  
				deg=360-cc||360-dd;  
			}  
			return deg>=360?0:deg;  
			//return (aa+','+bb+','+cc+','+dd);  
		}  
		function rotate(dom){
			var ele = $(dom);
			// console.log(ele.css('transform'))
			var css = ele.css('transform');
			var deg;
			var step=90;//每次旋转多少度 
			if(css === 'none'){
				deg = 0;
			} else {
				deg=eval('get'+css);
			}         
			ele.css({'transform':'rotate('+(deg+step)%360+'deg)'});  

		}
	
		script>
	body>
html>

运行结果:

transform简单实现图片点击旋转_第1张图片

transform简单实现图片点击旋转_第2张图片

你可能感兴趣的:(transform简单实现图片点击旋转)