I need to rotate an image with javascript in 90-degree intervals. I have tried a few libraries like jQuery rotate and Raphaël, but they have the same problem - The image is rotated around its center. I have a bunch of content on all sides of the image, and if the image isn't perfectly square, parts of it will end up on top of that content. I want the image to stay inside its parent div, which has max-with and max-height set.
Using jQuery rotate like this ():
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
Results in this:
And this is the result i would like instead:
Anyone have an idea on how to accomplish this?
9 Answers
You use a combination of CSS's transform (with vendor prefixes as necessary) and transform-origin, like this: (also on jsFiddle)
var angle = 0,
img = document.getElementById('container');
document.getElementById('button').onclick = function() {
angle = (angle + 90) % 360;
img.className = "rotate" + angle;
}#container {
width: 820px;
height: 100px;
overflow: hidden;
}
#container.rotate90,
#container.rotate270 {
width: 100px;
height: 820px
}
#image {
transform-origin: top left;
/* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left;
/* Chrome */
-ms-transform-origin: top left;
/* IE 9 */
}
#container.rotate90 #image {
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
#container.rotate180 #image {
transform: rotate(180deg) translate(-100%, -100%);
-webkit-transform: rotate(180deg) translate(-100%, -100%);
-ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#container.rotate270 #image {
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}<button id="button">Click me!</button>
<div id="container">
<img src="" id="image" />
</div>var angle = 0;
$('#button').on('click', function() {
angle += 90;
$('#image').css('transform','rotate(' + angle + 'deg)');
});
Try this code.
No need for jQuery and lot's of CSS anymore (Note that some browsers need extra CSS)
Kind of what @Abinthaha posted, but pure JS, without the need of jQuery.
let rotateAngle = 90;
function rotate(image) {
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
rotateAngle = rotateAngle + 90;
}#rotater {
transition: all 0.3s ease;
border: 0.0625em solid black;
border-radius: 3.75em;
}<img id="rotater" onclick="rotate(this)" src=""/>CSS can be applied and you will have to set transform-origin correctly to get the applied transformation in the way you want
See the fiddle:
Main code:
/* assuming that the image's height is 70px */
img.rotated {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform-origin: 35px 35px;
-webkit-transform-origin: 35px 35px;
-moz-transform-origin: 35px 35px;
-ms-transform-origin: 35px 35px;
}
jQuery and JS:
$(img)
.css('transform-origin-x', imgWidth / 2)
.css('transform-origin-y', imgHeight / 2);
// By calculating the height and width of the image in the load function
// $(img).css('transform-origin', (imgWidth / 2) + ' ' + (imgHeight / 2) );
Logic:
Divide the image's height by 2. The transform-x and transform-y values should be this value
Link:
transform-origin at CSS | MDN
Hope this can help you!
<input type="button" id="left" value="left" />
<input type="button" id="right" value="right" />
<img src="" id="image">
<script>
var angle = 0;
$('#left').on('click', function () {
angle -= 90;
$("#image").rotate(angle);
});
$('#right').on('click', function () {
angle += 90;
$("#image").rotate(angle);
});
</script>
i have seen your running code .There is one line correction in your code.
Write:
$("#wrapper").rotate(angle);
instead of:
$("#image").rotate(angle);
and you will get your desired output,hope this is what you want.
I think this will work.
document.getElementById('#image').style.transform = "rotate(90deg)";
Hope this helps. It's work with me.
You can always apply CCS class with rotate property -
To keep rotated image within your div dimensions you need to adjust CSS as well, there is no needs to use JavaScript except of adding class.
Based on Anuga answer I have extended it to multiple images.
Keep track of the rotation angle of the image as an attribute of the image.
function rotate(image) {
let rotateAngle = Number(image.getAttribute("rotangle")) + 90;
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
image.setAttribute("rotangle", "" + rotateAngle);
}.rotater {
transition: all 0.3s ease;
border: 0.0625em solid black;
border-radius: 3.75em;
}<img class="rotater" onclick="rotate(this)" src=""/>
<img class="rotater" onclick="rotate(this)" src=""/>
<img class="rotater" onclick="rotate(this)" src=""/>Edit
Removed the modulo, looks strange.
