我需要以 90 度的间隔使用 javascript 旋转图像。我尝试了一些库，如jQuery rotate和Raphaël，但它们有同样的问题 - 图像围绕其中心旋转。我在图像的四面都有一堆内容，如果图像不是完美的方形，它的一部分最终会出现在该内容之上。我希望图像保留在其父 div 内，该 div 设置了 max-with 和 max-height。
像这样使用 jQuery 旋转（http://jsfiddle.net/s6zSn/1073/）：
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
结果如下：
这是我想要的结果：
任何人都知道如何实现这一目标？
您使用CSS 的transform组合（根据需要使用供应商前缀）和transform-origin，如下所示：（也在 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>var angle = 0;
$('#button').on('click', function() {
angle += 90;
$('#image').css('transform','rotate(' + angle + 'deg)');
});
试试这个代码。
不再需要 jQuery 和大量 CSS（请注意，某些浏览器需要额外的 CSS）
类似于@Abinthaha 发布的内容，但是纯 JS，不需要 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="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>可以应用 CSS，您必须transform-origin正确设置才能以您想要的方式获得应用的转换
见小提琴：
http://jsfiddle.net/OMS_/gkrsz/
主要代码：
/* 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 和 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) );
逻辑：
将图像的高度除以 2。transform-x和transform-y值应该是这个值
链接：
CSS 中的transform-origin | MDN
希望这可以帮到你！
<input type="button" id="left" value="left" />
<input type="button" id="right" value="right" />
<img src="https://www.google.com/images/srpr/logo3w.png" 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>