So i'm using imagerotate() to rotate an image by 90 degrees on button press using ajax which is working fine but my issue is the rotation seems to be fixed?
Basically when i press the button it rotates the image to its 90 degree anticlockwise position but when i press it again it doesnt rotate it by a further 90 degrees anticlockwise (thus making it 180 in total) it just remains in its current 90 degree position.
$img = imagerotate($img, 90, 0);
Is this its normal behavior or am i doing something wrong? If so is there another method i could use instead?
Thanks.
You can use javascript to do this on click fairly easily (fiddle), by increasing the angle as desired on click:
var angle = 90;
$('#flower').click(function() {
$(this).css({
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
angle += 90;
});
#flower {
position: fixed;
display: block;
border:1px solid grey;
margin-top: 20px;
margin-left: 20px;
height: 100px;
width: 100px;
padding: 15px;
transition: all .5s ease-out;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://www.rachelgallen.com/images/snowdrops.jpg" id="flower" alt="turning">
You would need to pass separate angle values into the imagerotate php function, so you could either use the javascript or set the rotated-image as the source image to rotate on second click using the php method.
Hope this helps