js实现图片左右垂直翻转

最新推荐文章于 2022-11-28 09:21:53 发布

maskice

最新推荐文章于 2022-11-28 09:21:53 发布

阅读量9.1k

点赞数 3

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/maskice/article/details/51029042

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script>
		var current = 0;
		function turnLeft(){
			current = (current-90)%360;
			document.getElementById('target').style.transform = 'rotate('+current+'deg)';
		}
		function turnRight(){
			current = (current+90)%360;
			document.getElementById('target').style.transform = 'rotate('+current+'deg)';
		}
	</script>
</head>
<body>
	<img id ="target" src="../image/head_portrait.jpg" alt="">
	<input value="左转" type="button" οnclick="turnLeft()">
	<input value="右转" type="button" οnclick="turnRight()">
</body>
</html>

附：transform浏览器支持情况

http://www.w3school.com.cn/cssref/pr_transform.asp