单击旋转图像图标

Question

Was wondering if someone can help me with this. I want to be able to click the text/icon, and on click, the + icon rotates 45 degrees to look like ax icon. Upon second click, the icon rotates back to look like a + icon, and so on.

Any help will be greatly appreciated!

JSFIDDLE

https://jsfiddle.net/d264kt2t/

HTML

<div class="container">

<div class="pointer">
CLICK ME<img src="http://www.ssglobalsupply.com/images/plus.png" class="coolImage">
</div>

</div>

CSS

.container{
  width:100%;
  padding-top:100px;
  padding-bottom:100px;
  background-color:#000;

}

.coolImage{
  height:17px;
  width:17px;
  margin-left:7px;
}

.pointer{
  cursor:pointer;
  text-align:center;
  font-size:20px;
  color:#fff;
}

Answer 1

Succinct with a beautiful animation

Personally, I disliked Louys' overly verbose and uninteresting solution.

Here, with jQuery at our disposal we can create something so much more beautiful:

rotated = false;
$('.pointer').click(function(){
  elem = this;

  $({rotation: 225*rotated}).animate({rotation: 225*!rotated}, {
    duration: 500,
    step: function(now) {
      $(elem).css({'transform' : 'rotate('+ now +'deg)'});
    }
  });
  rotated=!rotated;
});

See the JSFiddle or the snippet:

 i = 1; $('.pointer').click(function(){ elem = $(this).children("img")[0]; $({rotation: 225*!i}).animate({rotation: 225*i}, { duration: 500, step: function(now) { $(elem).css({'transform' : 'rotate('+ now +'deg)'}); } }); i=!i; }); 

 .container{ width:100%; padding-top:100px; padding-bottom:100px; background-color:#000; text-align:center; font-size:20px; color:#fff; } .coolImage{ height:17px; width:17px; margin-left:7px; } .pointer{ cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="pointer"> CLICK ME<img src="https://i.stack.imgur.com/Tgf0C.png" class="coolImage"> </div> </div> 

We jQuery#animate a "fake" object to be able to generate the smooth animation. You can change the duration to something else if you want to speed or slow the animation.

rotated is used as a stand-in variable to provide the toggle functionality.

Please ask if further clarification is needed.

Answer 2

Define a rotated class in you css, then toggle the class on clicks, for example like:

 var pointers = document.getElementsByClassName('pointer'); for(var i = 0; i < pointers.length; i++){ pointers[i].addEventListener('click', function(event) { event.target.getElementsByClassName('coolImage')[0].classList.toggle('rotated'); }); } 

 .container{ width:100%; padding-top:100px; padding-bottom:100px; background-color:#000; text-align:center; font-size:20px; color:#fff; } .coolImage{ height:17px; width:17px; margin-left:7px; transform:rotate(45) } .pointer{ cursor:pointer; } .rotated { transform: rotate(45deg); } 

 <div class="container"> <div class="pointer"> CLICK ME<img src="http://www.ssglobalsupply.com/images/plus.png" class="coolImage"> </div> </div> 

Answer 3

Here you go with a cross-browser working example:

 function rotate() { var elm = document.getElementById('imgToRotate'); var className = elm.className; if(className.indexOf('rotate') === -1) { elm.className = elm.className + ' rotate'; } else { elm.className = elm.className.replace(' rotate', ''); } } 

 .container{ width:100%; padding-top:100px; padding-bottom:100px; background-color:#000; text-align:center; font-size:20px; color:#fff; } .coolImage{ height:17px; width:17px; margin-left:7px; } .pointer{ cursor:pointer; } .rotate { transform:rotate(45deg); /* Firefox */ -moz-transform:rotate(45deg); /* Safari and Chrome */ -webkit-transform:rotate(45deg); /* Opera */ -o-transform:rotate(45deg); /* IE9 */ -ms-transform:rotate(45deg); /* IE6,IE7 */ filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; } 

 <div class="container"> <div class="pointer" onclick="rotate()"> CLICK ME<img src="http://www.ssglobalsupply.com/images/plus.png" class="coolImage" id="imgToRotate"> </div> </div> 

JSFiddle https://jsfiddle.net/balasuar/jcwg1h71/

Answer 4

将此代码插入<img>标签：

onclick="this.style['-webkit-transform'] = 'rotate(' + 45 + 'deg)';"

Answer 5

I updated your Fiddle with this script:

var rotated = false;
$(".pointer").click(function() {
  if (!rotated) {
    $(this).find("img").css({
      "transform": "rotate(45deg)"
    });
  } else {
    $(this).find("img").css({
      "transform": "rotate(0deg)"
    });
  }
  // Toggle the flag
  rotated = !rotated;
});

Notice That I also added the jQuery lib in the external ressources".