Webページでの画像の拡大・縮小・回転

皆様

お世話になっております。

私は現在画像を表示するWebページの作成を行っております。
構成としては画面の左側に画像を説明する文章、右側に画像を考えております。
そこで画像をただ表示するだけではなく画像の拡大・縮小・回転・任意での画像のスライド（複数画像の場合）などをできないかと考えているのですが、
なにかおすすめのプラグインなどご存知の方がいらっしゃいましたらご教授願えませんでしょうか？

現在は画面内右側に<div>で囲ったボックスを作成し、その中にボタンを置いて押下されたらtransformの「scale」や「rotate」などを実行させて画像の操作を行おうと考えているのですが、もっとデザインなども洗練されたスマートなものがあればと思い質問させていただきました。

以下、現在のソースになります

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<style>
5			#leftBox,#rightBox {
6				border: 1px solid #000;
7				width: 40%;
8				height: 50%;
9				margin: 100px 10px;
10				display: inline-block;
11			}
12		</style>
13		<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
14		<script>
15		$(document).ready(function () {
16			var d = 0;
17			var zoomNum = 1;
18			$("#rotationBtn").on('click', function() {
19				var element = $("#rightBox").children('img');
20				d = d + 90;
21				if (d == 360) d = 0;
22				element[0].style.transform = "rotate(" + d + "deg) scale(" + zoomNum + ")";
23			});
24
25			$("#expansionBtn").on('click', function() {
26				var element = $("#rightBox").children('img');
27				zoomNum = zoomNum * 1.1;
28				element[0].style.transformOrigin = "left top";
29				element[0].style.transform = "scale(" + zoomNum + ") rotate(" + d + "deg)";
30				element[0].style.transformOrigin = "50% 50%";
31			});
32
33			$("#shrinkBtn").on('click', function() {
34				var element = $("#rightBox").children('img');
35				zoomNum = zoomNum * 0.9;
36				element[0].style.transformOrigin = "left top";
37				element[0].style.transform = "scale(" + zoomNum + ") rotate(" + d + "deg)";
38				element[0].style.transformOrigin = "50% 50%";
39			});
40		})
41		</script>
42	</head>
43	<body>
44		<div id="leftBox" style="" >画像の説明文</div>
45		<div id="rightBox">
46			画像表示スペース<br>
47			<img src="./test.jpg"><br>
48			<input type="button" id="expansionBtn" value="拡大" >
49			<input type="button" id="shrinkBtn" value="縮小" >
50			<input type="button" id="rotationBtn" value="回転" >
51		</div>
52	</body>
53</html>