jquery图片旋转

jQuery图片旋转实现方法

使用CSS3 transform属性

通过jQuery动态修改CSS的transform属性实现旋转效果。这种方法性能较好，适合现代浏览器。

$('#image').css({
  'transform': 'rotate(45deg)',
  'transition': 'transform 0.5s ease' // 添加过渡动画
});

使用rotate()插件

jQuery Rotate插件专门用于处理元素旋转，支持跨浏览器兼容。

// 引入jquery.rotate.js后
$("#image").rotate(90); // 旋转90度

动画效果旋转

结合jQuery的animate()方法和CSS变换实现平滑旋转动画。

let degree = 0;
setInterval(function(){
  degree += 1;
  $('#image').css('transform', 'rotate('+degree+'deg)');
}, 16);

控制旋转角度

通过按钮控制图片旋转角度，示例代码：

let currentRotation = 0;
$('#rotate-btn').click(function(){
  currentRotation += 90;
  $('#image').css('transform', 'rotate('+currentRotation+'deg)');
});

注意事项

• 考虑添加transform-origin属性设置旋转中心点
• 对于IE9及以下版本需要添加ms前缀
• 旋转后可能需要调整容器尺寸防止裁剪

扩展功能

可以结合拖拽实现交互式旋转，或使用滑块控件控制旋转角度。对于复杂需求，推荐使用专门的图形库如Three.js或Fabric.js。