javascriptで画像を90度間隔で回転させる必要があります。jQuery rotate]1やRaphaëlなど、いくつかのライブラリを試してみましたが、同じ問題がありました - 画像がその中心を中心に回転してしまうのです。画像の四方にはたくさんのコンテンツがあるので、画像が完全に正方形でないと、画像の一部がコンテンツの上に乗ってしまいます。画像は、max-widthとmax-heightが設定されている親divの中に収まるようにしたいのです。
jQueryを使って回転させると次のようになります([
][3])。var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
結果はこのようになります。
になります。
そして、これが私が代わりに望む結果です。
.
誰かこれを実現する方法を知っていますか?
CSS'のtransform
]1(必要に応じてベンダープレフィックス付き)と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>
常にCCSクラスを rotate
プロパティで適用することができます。 - http://css-tricks.com/snippets/css/text-rotation/
回転した画像をdiv
の寸法内に収めるためには、CSSも調整する必要がありますが、クラスを追加する以外にJavaScriptを使う必要はありません。