Html & JS rotate image 90 degrees on click

后端 未结 3 530
野的像风
野的像风 2021-01-22 14:19

I am trying to rotate right this image on click
Every click, the image will rotate 90 degrees right, so 4 clicks will get it to the original position.
For some reason as

相关标签:
3条回答
  • 2021-01-22 14:41

    Firstly, you will have to use $('#theImage') since you are referencing by id. Try the below code.

    let angle = [0, 90, 180, 270];
    let current = 0;
    
    function rotate90() {
      current++;
      if (current == 4)
        current = 0;
      $('#theImage').css('transform', 'rotate(' + angle[current] + 'deg)');
    }
    .btn-floating-container {
      top: 50px;
      left: 50px;
      position: fixed;
      z-index: 1;
    }
    
    .btn-floating {
      width: 150px;
      height: 50px;
      border-radius: 50%;
      text-align: center;
      padding: 0px;
      font-size: 24px;
    }
    
    .rotateimg90 {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <div class="btn-floating-container">
      <button class="btn-floating btn btn-primary btn-medium" onclick="rotate90()">ROTATE</button>
    </div>
    
    <img id="theImage" src="https://images.unsplash.com/photo-1533467915241-eac02e856653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />

    0 讨论(0)
  • 2021-01-22 14:47

    You are selecting by class (.theImage), but that element is assigned an id, so you should select like this $('#theImage').

    0 讨论(0)
  • 2021-01-22 14:50

    I do not understand why your answers are in jQuery while you have clearly asked for an answer in javascript.

    There are several errors in your essay :

    1- as indicated by others you have confused the use of a class (represented by a .) With the use of an ID (represented by a #), but anyway you do not need to use it.

    2- repeating the addition of a single class is useless: the rotation values will not add up.

    3- you have placed the button "ROTATE" is in the background of the image => I added a z-index to 100 so that it returns to the foreground.

    const Root     = document.documentElement
        , gRoot    = getComputedStyle(Root)
    
    var RotateDeg = parseInt(gRoot.getPropertyValue('--turn'))
    
    function rotate90()
      {
      RotateDeg = (RotateDeg+90) % 360
      Root.style.setProperty('--turn', RotateDeg + "deg")
      }
    :root {
      --turn : 0deg;
    }
    .btn-floating-container {
      top:50px;
      left:50px;
      position: fixed;
      z-index: 100;
    }
      
    .btn-floating {
      width: 150px;
      height: 50px;
      border-radius: 50%;
      text-align: center;
      padding: 0px;
      font-size: 24px;
      }
    
    #theImage {
      -webkit-transform:rotate( var(--turn) );
      -moz-transform: rotate( var(--turn) );
      -ms-transform: rotate( var(--turn) );
      -o-transform: rotate( var(--turn) );
      transform: rotate( var(--turn) );
    }
    <div class="btn-floating-container">
      <button class="btn-floating btn btn-primary btn-medium"  onclick="rotate90()">ROTATE</button>
    </div>
      
    <img id="theImage" src="https://images.unsplash.com/photo-1533467915241-eac02e856653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />

    0 讨论(0)
提交回复
热议问题