不使用CSS3左下角左右旋轉的圖像旋轉

我想旋轉圖片，使其像tympanus's swatchbook一樣工作。
但我寧願不使用，等CSS 3，因爲以前的鏈接將需要。
我寧願做所有js的旋轉，使用，每個實例，JQueryRotate，這是偉大的除了旋轉點，以圖像爲中心。不使用CSS3左下角左右旋轉的圖像旋轉

而不是指出一個圖書館這樣做，我想學習一個很好的旋轉方法的圖像，特別是，我該如何改變旋轉點，在該方法，所以我可以實現我想要的swatchbook效果。

但是，如果你知道一個庫，那麼我也很喜歡它。

感謝

編輯：

在寫我意識到事情的問題。我可以放大該圖像的持有人。雖然不是很亮也不優雅，還是很不錯的，這是一個開始。我會通過x3ro檢查提出對策的探討：Image rotation algorithm

HTML片段：

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script> 
<div id="dvImg" style="position:relative;border: 1px solid black;"> 
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image" style="position:absolute;top:0;left:12px;margin:auto;border: 1px solid black;"> 
<div>

JS片段：

$("#dvImg").width($("#image").width()*2); 
$("#dvImg").height($("#image").height()*2); 
$("#image").css({ left: $("#image").width() + "px", top: $("#image").height()}); 

$("#image").mouseover(function() { 
    $("#dvImg").rotate({animateTo:90}); 
});

來源

2012-11-01 marcelo-ferraz

你當然可以看看JQueryRotate代碼，看看他們是如何做的。然後你會看到他們使用CSS 3，特別是針對IE的替代方法。如果它足夠「不是CSS3」，那就是你可以做的。否則，你應該問自己是否有可能。 – Jasper

當我寫這個問題的時候，有一個虛擬的答案給了我。我用可能的解決方案更新了這個問題。它仍然非常虛擬。 –

哈哈，等到我寫完整件事 –

如果你想自己做旋轉，看看這個問題：Image rotation algorithm。當然，這不是一個JavaScript特定的解釋，但它應該或多或少容易地轉換爲基於畫布的解決方案。我沒有看看jQueryRotate實現，但它可能也值得研究。

這就是說，有可能是關於「如何旋轉，在左下角的樞軸點圖片」沒有JavaScript的具體教程：d

由於@Jasper指出，這可能是好的要知道雖然canvas本身在IE9以前的IE版本中不受支持，但仍有許多方法和手段可以獲得（較大的子集）canvas API，即使在早期版本中也如ExplorerCanvas所示。

來源

2012-11-01 14:48:27 fresskoma

我覺得這個答案有點虛僞。雖然沒有明確表示不使用畫布，但如果您要依賴HTML 5支持，不需要依賴CSS 3支持 – Jasper

@Jasper：嗯，我不知道解決方案它允許旋轉圖像而無需使用某種畫布進行繪製。我認爲「不使用CSS3」是一種要求，因爲較舊的IE版本不支持它，但即使在早期版本的IE中，也可以使用類似於HTML5 canvas規範的功能。因此，我看不到如何「不使用CSS3」轉換爲「不使用畫布」。 – fresskoma

感謝您的回覆，@ x3ro。要檢查出來 –

不使用CSS3左下角左右旋轉的圖像旋轉

回答

相關問題