如何在我的網站上旋轉圖片？

-1

是否有標準的代碼，我可以用它來旋轉在我的HTML網站的圖片？如何在我的網站上旋轉圖片？

來源

2011-07-07 Keith Koh

你的意思是在編輯方面旋轉？你用Google嗎？ –

是編輯。我GOOGLE了它，並出來了很多不同的代碼，這是不相似的所有 –

有數百個JavaScript腳本庫可供選擇使用jQuery/MoooooToools ..一些API網站..然後你有HTML5/CSS3 ..沒有什麼簡單的所有的瀏覽器.. soz – ppumkin

相信對於旋轉HTML元素只支持通過CSS轉換提供。

他們由WebKit團隊發明（我認爲）：

http://www.webkit.org/blog/130/css-transforms/

目前人們在其他瀏覽器都支持太：

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

來源

2011-07-07 12:28:36

[另請參閱]（http://www.boogdesign.com/examples/transforms/matrix-calculator.html） – robertc

CSS3有一個transform樣式，它允許您旋轉任何HTML元素。你會這樣使用它：

.myelement { 
    transform:rotate(45deg); 
}

這應該在大多數瀏覽器（Firefox 5，Chrome 13，IE9等）的最新版本中工作。不過，舊版瀏覽器會有問題。

一些舊的瀏覽器需要供應商前綴，所以你需要-moz-transform和-webkit-transform等IE的

舊版本不支持transform風格可言，但他們有一個filter屬性，它可以是改爲使用。不幸的是，IE的旋轉過濾語法相當複雜。你必須指定一個矩陣變換，其值以弧度而不是度數表示，所以它可能有點模糊。

對於45度旋轉，你會使用下面的代碼：

.myelement { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')"; 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand'); 
}

你會注意到，IE6和IE7要求filter風格，而IE8需要-ms-filter（以稍微不同的語法）。

而不是在這裏解釋一下，我會指出你在那裏進行詳細說明的頁面：http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

最後要注意的filter風格謹慎的：在IE6/7語法是無效的CSS（因在progid等之後到冒號）。我看到它實際上導致其他瀏覽器（特別是Firefox 3.6）無法解析整個樣式表。出於這個原因，我建議在一個單獨的IE特定的樣式表中使用它，你可以從其他瀏覽器中完全排除它。

如果你想通過JavaScript這樣做，我會建議使用jQuery插件英寸，這將消除不必編寫單獨的代碼爲所有不同瀏覽器的複雜性。在這裏看到更多的信息：http://plugins.jquery.com/plugin-tags/rotate

希望有所幫助。

來源

2011-07-07 13:37:59 Spudley

根據下面的robertc的評論，對於IE中使用'filter'的CSS旋轉，請參見http：// www。 boogdesign.com/examples/transforms/matrix-calculator.html –

@Paul - boogdesign頁面適用於爲IE生成工作風格，但它也爲所有其他瀏覽器生成了Matrix轉換。當然，這意味着它在所有瀏覽器中都是相同的數字，但是根據我的答案不會「旋轉（）」轉換要簡單得多嗎？（可能對瀏覽器的工作量更少）。 – Spudley

噢，'旋轉（）'確實更簡單。但是，如果人們想要在IE8中提供輪換，那麼人們需要了解「過濾器」的東西，所以（直到老的IEs死掉）值得一提。（是否值得使用*'filter'取決於項目的上下文。） –

您旋轉圖像，無論是在客戶端（瀏覽器內）或服務器端（在你的服務器上，然後重新發送圖像到瀏覽器）。

要旋轉瀏覽器，看到Spudley的答案。

服務器上的常見方式是使用imagemagick大多數所有Web語言/框架都包含綁定，以便於使用圖像magick。例如，這裏是PHP version。

A list許多不同的語言。

您可以使用Ajax技術爲用戶旋轉圖像，而無需刷新頁面。

來源

2011-07-07 13:40:16

如何在我的網站上旋轉圖片？

回答

相關問題