Нужна помощь в реализации кнопки, которая будет плавно поворачивать div
на 45 градусов. Необходимо учесть, что нажатие на кнопку может быть многократным.
body {
background-color: #888888;
color: #FFF;
font-family: Verdana, Helvetica, sans-serif;
font-size: 16px;
margin: 10px;
}
#superellips {
height: 120px;
width: 120px;
background: #1eff00;
border-radius: 15px;
margin: 40px;
}
#controls .button {
display: inline-block;
background-color: rgba(0, 0, 0, .3);
color: white;
font-weight: 700;
text-decoration: none;
user-select: none;
padding: .5em 2em;
outline: none;
border: 2px solid;
border-radius: 1px;
transition: 0.2s;
min-height: 50px;
min-width: 300px;
}
#controls .button:hover { background: rgba(255,255,255,.2); }
#controls .button:active { background: white; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>Вращение суперэллипса</title>
</head>
<body>
<div id="wrapper">
<h1>Вращение суперэллипса</h1>
<div id="superellips"></div>
</div>
<div id="controls">
<button class="button" onclick="turnRight(this)">Повернуть по часовой стрелке</button>
<button class="button" onclick="turnLeft()">Повернуть против часовой стрелки</button>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>