Need help in the implementation of the button, which will smoothly turn the div 45 degrees. It should be noted that pressing a button can be multiple.

 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>

Code example

    1 answer 1

     function turnRight() { turnEllipse(45); } function turnLeft() { turnEllipse(-45); } function turnEllipse(degrees) { var angle = $("#superellips").data("angle"); if (!angle) angle = 0; angle = +angle + degrees; $("#superellips") .data("angle", angle) .css({ transform: "rotate(" + angle + "deg)", transition: "1s" }); } 
     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; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <h1>Вращение суперэллипса</h1> <div id="superellips"></div> </div> <div id="controls"> <button class="button" onclick="turnRight()">Повернуть по часовой стрелке</button> <button class="button" onclick="turnLeft()">Повернуть против часовой стрелки</button> </div>