使用javascript旋转图像 [英] Rotate image with javascript

问题描述

我需要以90度的间隔使用javascript旋转图像。我尝试了一些像

  var angle = 0，img = document.getElementById（'container'）; document.getElementById（ 'button'）。onclick = function（）{angle =（an gle + 90）％360; img.className =rotate+ angle;}  

 ＃容器{宽度：820px;身高：100px; overflow：hidden;}＃container.rotate90，＃container.rotate270 {width：100px;身高：820px} #image {transform-origin：左上角; / * IE 10 +，Firefox等* / -webkit-transform-origin：左上角; / * Chrome * / -ms-transform-origin：左上角; / * 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>点击我！< / button>< div id =container> < img src =http://i.stack.imgur.com/zbLrE.pngid =image/>< / div>  

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 (http://jsfiddle.net/s6zSn/1073/):

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?

解决方案

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="http://i.stack.imgur.com/zbLrE.png" id="image" />
</div>

这篇关于使用javascript旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！