使用javascript在div內順時針或逆時針旋轉圖像

Question

HI，有沒有辦法可以順時針或逆時針旋轉div內的圖像。

我有一個主要的固定寬度div [溢出設置為隱藏]與從數據庫加載的圖像。 有一個滾動條，用於顯示div內的圖像。 單擊圖像時，我需要以順時針或逆時針方向顯示旋轉動畫。

我使用Matrix過濾器完成了它。 我想知道是否可以在IE中完成而不使用任何過濾器。

Answer 1

試試這個： http ： //raphaeljs.com/image-rotation.html

使用canvas但也支持IE

Answer 2

如果你正在使用jQuery，jQueryRotate是一個小的（小於3Kb縮小+ gzip）插件，可以旋轉圖像：

http://jqueryrotate.com/

Answer 3

在IE中，我能想到在客戶端旋轉圖像的唯一方法是使用過濾器。 對於某些最新版本的其他瀏覽器，您可以使用<canvas>控件 。

您可以選擇使用服務器端腳本來旋轉圖像。 然后您可以發送有關如何使用JavaScript旋轉它的信息（即生成圖像的路徑，例如/rotate?image=img.jpg&amount=90）

Answer 4

CSS3支持旋轉 ，但不受廣泛支持 。 正如你要求的JavaScript解決方案， 這是一個 ，但我認為你不能得到流暢的圖像。

Answer 5

還有其他方法來旋轉圖像，沒有任何過濾器/ html5 ..它在現實世界中是令人討厭和無用的，但可能。

對於javascript，您可以將圖像存儲為像素數組。 寫函數用它來執行旋轉並將其編碼為base64 datauri，bmp可以很容易並用它替換image.src。

舊瀏覽器中的文件大小和支持會有一些限制，當然還有可怕的性能。