img {
display: block;
margin: 20px;
width: 50px;
height: 50px;
}
.crossRotate {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
outline: 0;
}
.crossRotate.active {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$('.crossRotate').on('click', function(){
$(this).toggleClass('active');
});
</script>
<link rel="stylesheet" href="StyleSheet.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<img class="crossRotate" src="https://s31.postimg.org/cf0ip4gd7/logo.gif" alt="Cross Menu button" tabindex="1" />
</body>
</html>Hello, I am attempting to create a rotating image effect on click. Although I followed a tutorial that seemed to work for someone else (http://jsbin.com/bukacesari/edit?html,css,js,output), it's not functioning as expected for me. Can you help me understand why it's not working and how I can fix it? I feel like I must be missing something simple, but I can't figure out what's wrong. Thank you!