All geek questions in one place

How to rotate image / div in JavaScript in non-IE browsers

I need to rotate the image dynamically in the angle specified by the user.

I use the following code, but it only works for IE, not for any other browser.

<div id="frame1" style="overflow:hidden" width='300' height='300'> <div id="frame2" width='200' height='200'> <img src='1.jpeg'' id='im' src='1.jpeg' width='10' height='10'> </div> </div> <script type="text/javascript"> rotate(frame2, 45); function rotate (elem, deg) { if (navigator.appName=='Microsoft Internet Explorer') { rad = deg*Math.PI/180; elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; elem.filters.item(0).M11 = Math.cos(rad); elem.filters.item(0).M12 = -Math.sin(rad); elem.filters.item(0).M21 = Math.sin(rad); elem.filters.item(0).M22 = Math.cos(rad); elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px' elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px' } else { elem.style.MozTransform = 'rotate(' + deg + ')'; elem.style.WebkitTransform = 'rotate(' + deg + ')'; elem.style.OTransform = 'rotate(' + deg + ')'; elem.style.MsTransform = 'rotate(' + deg + ')'; elem.style.transform = 'rotate(' + deg + ')'; } } </script>

Can you help?

+4
source share
3 answers

Check out the CSS example:

 -webkit-transform: rotate(45deg);

As you can see, you forgot to add deg

 elem.style.mozTransform = 'rotate(' + deg + 'deg)'; elem.style.webkitTransform = 'rotate(' + deg + 'deg)'; elem.style.oTransform = 'rotate(' + deg + 'deg)'; elem.style.msTransform = 'rotate(' + deg + 'deg)'; elem.style.transform = 'rotate(' + deg + 'deg)';
+7
source

This is actually easier on browsers that are not IE. MDN has good documentation on how to do this with CSS3. There is also here .

For Webkit browsers, this page should help.

0
source

You forgot to add deg to the css property.

You should also add transform origin to the image so that it rotates in the center (assuming what you are trying to do).

This code should do this.

 <!DOCTYPE html> <html> <head> <title></title> <style> </style> </head> <body> <div id="frame1" style="overflow:hidden" width='300' height='300'> <div id="frame2" width='200' height='200'> <img src='1.jpeg' id='im' src='1.jpeg' width='10' height='10'> </div> </div> <script type="text/javascript"> rotate(frame2, 45); function rotate (elem, deg) { if (navigator.appName=='Microsoft Internet Explorer') { rad = deg*Math.PI/180; elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; elem.filters.item(0).M11 = Math.cos(rad); elem.filters.item(0).M12 = -Math.sin(rad); elem.filters.item(0).M21 = Math.sin(rad); elem.filters.item(0).M22 = Math.cos(rad); elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px' elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px' } else { elem.style.MozTransformOrigin = "5px 5px"; elem.style.WebkitTransformOrigin = "5px 5px"; elem.style.OTransformOrigin = "5px 5px"; elem.style.MsTransformOrigin = "5px 5px"; elem.style.transformOrigin = "5px 5px"; elem.style.MozTransform = 'rotate(' + deg + 'deg)'; elem.style.WebkitTransform = 'rotate(' + deg + 'deg)'; elem.style.OTransform = 'rotate(' + deg + 'deg)'; elem.style.MsTransform = 'rotate(' + deg + 'deg)'; elem.style.transform = 'rotate(' + deg + 'deg)'; } } </script> </body> </html>
0
source

Source: https://habr.com/ru/post/1386155/

More articles:


All Articles