我需要用javascript以90度的间隔来旋转一张图片。我试过一些库,如jQuery rotate和Raphaël,但它们都有同样的问题--图像是围绕中心旋转的。我在图片的四面都有一堆内容,如果图片不是完全正方形,它的一部分就会出现在这些内容的上面。我想让图像保持在它的父神体内,父神设置了最大宽度和最大高度。
像这样使用jQuery旋转([
][3]):var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
结果是这样的:
而这是我想要的结果:
。
有没有人知道如何完成这个任务?
你使用[CSS'的transform
][1](必要时加上供应商的前缀)和transform-origin
的组合,像这样:[(也在jsFiddle上)](