如何使用客戶端解決方案旋轉圖像

我想知道是否有任何方法來動態旋轉圖像或使用客戶端解決方案顛倒圖像？我不在乎它是否是普通的舊javascript，jquery插件，css。我只是想知道是否有辦法在客戶端動態地執行此操作，而不必爲每個我可以執行的映像編寫服務器端代碼。如何使用客戶端解決方案旋轉圖像

我嘗試在Google上搜索不同的關鍵字，但找不到任何內容。

編輯：我正在尋找不從HTML 5.需要什麼

來源

2010-08-02 spinon

dup：http://stackoverflow.com/questions/968642/rotate-image-clockwise-or-anticlockwise-inside-a-div-using-javascript – 2010-08-02 05:46:53

讓我澄清一點，因爲我不想使用HTML 5 – spinon 2010-08-02 05:48:07

火狐，Safari和Opera支持這一點：

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
transform: rotate(-90deg);

，你也可以做到這一點在IE8，甚至7（？）：

position: absolute; 
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

旋轉使用JS的元素：

var deg = 90 
$('element').style.MozTransform = 'rotate(' + deg + 'deg)'; 
$('element').style.WebkitTransform = 'rotate(' + deg + 'deg)';

編輯：

哇，根據http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx的輪換適用於IE 5.5！

來源

2010-08-02 07:26:35 koko

這看起來不錯。我明天會試試看看它是如何發展的。 – spinon 2010-08-02 08:54:22

+1支持跨瀏覽器和'filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;' – 2012-04-06 20:27:54

您可以使用canvas元素做到這一點，如圖here的解決方案。我不是100％確定所有瀏覽器都支持它。它是HTML5的一部分（在Wikipedia上閱讀更多內容），所以FF，Safari和Chrome都支持它。不確定關於IE8。

來源

2010-08-02 05:52:13

感謝您的答案，但我真的希望儘可能避免使用畫布。不完全確定它可以，但那是我想弄明白。我試圖搜索谷歌和所有，並沒有發現任何東西。所以我想我會試着問一個問題，看看有沒有人曾經遇到過。 – spinon 2010-08-02 05:55:20

非常有趣的javascript解決方案： http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/ 想象一下，您正在運行一些商店或博客，並向用戶展示您的產品。該解決方案允許您通過腳本以非常逼真的形式節省空間並呈現產品視圖。它允許忘記閃光燈（這仍然不被所有移動設備支持）。你需要利用它的是：

下載免費的插件（以上使用鏈接）
安裝使用說明書
創建並添加一系列圖像的每個產品（圖像越多就越好插件旋轉效果，你會得到）
跟隨上調利率從用戶

效果真的不錯，我給你的產品。也可以在Android手機（LG P500），iPad和iPod touch上測試。

來源

2011-11-11 10:48:06 Artem

如何使用客戶端解決方案旋轉圖像

回答

相關問題