画像要素をクリックすると、要素の幅と高さではなく、その中のコンテンツが回転するという効果を作成したい(私のimgは400x300です)。要素の寸法は維持したいが、画像は回転します。要素自体を回転させない限り、位置に基づいて画像の高さまたは幅を圧縮しても問題ありません。
jQueryRotate を試してみましたが、要素内の画像ではなく、要素のみを回転させているようです。
要素自体を回転させずに画像を回転させるプラグインまたは方法はありますか?
編集:
私のコード:
$('#rotate-btn').click(function (e) {
value += 90;
if (value == 90) {
var img = document.getElementById('image_canv');
var width = img.clientWidth;
var height = img.clientHeight;
$('#image_canv').height(height);
$('#image_canv').width(width); {
animateTo: value
}
}
$('#image_canv').rotate(value);
});
});
画像を回転させますが、要素の位置が移動するため、うまくいきません。