BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] javascriptで画像を回転させる

2022-03-15 12:04:14

質問

javascriptで画像を90度間隔で回転させたいのですが、どうすればいいですか？いくつかのライブラリを試しましたが jQuery ローテート と ラファエル 画像は中心を軸に回転しています。画像の四方にはたくさんのコンテンツがあり、画像が完全に正方形でない場合、画像の一部がコンテンツの上に乗ってしまうのです。画像は、max-withとmax-heightが設定されている親divの中に収まるようにしたいのです。

このようにjQuery rotateを使って( 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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します