Rotate Image using jQuery and CSS

In this tutorial, we are going to rotate an image using CSS transform property. CSS transform property allows us to rotate, scale, move or skew elements.

Follow this video for complete guidance :

Source Code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  body{
    background:aliceblue;
  }
  .container{
    max-width:1200px;
  }

  .thumb{
    width: 100%;
  }
  .page-wrap{
    background:#fff;
    margin-top:50px;
    box-shadow: 1px 10px 10px #ddd;
    padding:30px;
    border-radius:15px;
  }
  .rotate-btn{
    padding:15px;
    border:1px solid #ccc;
    margin-bottom:20px;
    border-radius:7px;
  }
  .rotate-btn:hover{
    cursor: pointer;
    background: aliceblue;
  }
  
</style>

<div class="container page-wrap">
  <h3 class="mb-5">Rotate Image</h3>
  <div class="row">
    <div class="col-7">
      <figure>
        <img class="thumb" src="image.png">
      </figure>
    </div>
    <div class="col-5">
      <div class="rotate-btn" onclick="rotateLeft();"><i class="fa fa-rotate-left"></i></div>
      <div class="rotate-btn" onclick="rotateRight();"><i class="fa fa-rotate-right"></i></div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var angle = 0;
  function rotateLeft(){
    angle -= 90;
    $(".thumb").css('transform','rotate(' + angle + 'deg)');
  }
  function rotateRight(){
    angle += 90;
    $(".thumb").css('transform','rotate(' + angle + 'deg)');
  }
</script>