如何在Javascript或CSS中旋轉圖像

我想使用jQUERY旋轉關節使其移動。我使用.animate（http://api.jquery.com/animate/）爲CSS屬性設置動畫，但如果它也可以使用Javscript，我可以製作自己的自定義代碼。

更多要點

如何在CSS或Javascript中旋轉圖像？我更喜歡CSS，但Javascript也很好。

如果這是不可能的（我非常肯定它是，但我還沒有放棄）還有其他可能的方式來做我想做的事情，而不用做一堆單獨的圖像，每旋轉一個不同的圖像辦法。或者任何人都可以至少給我一個類似的網站的例子。我需要1個CSS屬性（no -something：rotation（500deg）;）與FireFox,Safari和Chrome一起使用，因爲這些是我真正使用的唯一瀏覽器。

來源

2010-03-02 Eric

一些瀏覽器都支持這一點：

Rotate That Image with CSS

來源

2010-03-02 23:11:19

的Firefox和WebKit瀏覽器支持「改造」 CSS屬性（「-webkit-改造」，「-moz-變換」）。那些可以做各種有趣的事情。有一個非常微弱的IE工具，允許非常有限的旋轉，所以它不是一個真正的遊戲選項。

這裏有一個演示頁面我再＃1的問題，前幾天發了言：http://gutfullofbeer.net/compass.html

來源

2010-03-02 23:12:38 Pointy

不是一個完整的答案，但如果是有幫助這裏是一個有趣的小書籤，我在Safari瀏覽器（Chrome瀏覽器的工作原理也一樣）這將導致頁面內容旋轉：

javascript:(function(){var%20d=0;setInterval(function(){document.body.style['-webkit-transform']='rotate('+%20d%20+'deg)';d+=1},10)}());

我想它可能有助於查看示例用法。

來源

2010-03-03 21:49:49 Herms

你有沒有試過：http://jqueryrotate.com/ ??

在所有現代瀏覽器包括IE> = 6

來源

2010-04-16 14:03:33 Wilq32

不理想的偉大工程，但你可以做單獨的圖像文件對每個旋轉的圖像的狀態，然後用JavaScript來改變<img src="XXX" />或CSS改變background-image: url('XXX');一旦圖像已經加載（你甚至可以用JS預加載它們），它們之間的動畫應該非常快。

來源

2010-04-16 14:09:19 carillonator

如圖所示的圖像中上述 1）爲-90度或270度旋轉 2）是90度旋轉和 3）爲180度的旋轉。

注意： - 包含藍色方塊的象限是使用img標籤顯示時，網頁瀏覽器中的原始圖像位置。這是Web瀏覽器中開發人員唯一可見的部分。從左上角旋轉圖像時，它將切換到不可見象限。因此，使用translateX和translateY屬性以及css中的rotate屬性將圖像從不可見象限拖到可見象限以在Web瀏覽器上顯示它非常重要。有關更多信息，請參閱css transform property。

爲同一的CSS是如下

.image_rotate_270 { 
    transform-origin: top left; /* IE 10+, Firefox, etc. */ 
    -webkit-transform-origin: top left; /* Chrome */ 
    -ms-transform-origin: top left; /* IE 9 */ 

    transform: rotate(270deg) translateX(-100%); 
    -webkit-transform: rotate(270deg) translateX(-100%); 
    -ms-transform: rotate(270deg) translateX(-100%); 
} 


.image_rotate_90 { 
    transform-origin: top left; /* IE 10+, Firefox, etc. */ 
    -webkit-transform-origin: top left; /* Chrome */ 
    -ms-transform-origin: top left; /* IE 9 */ 

    transform: rotate(90deg) translateY(-100%); 
    -webkit-transform: rotate(90deg) translateY(-100%); 
    -ms-transform: rotate(90deg) translateY(-100%); 
} 


.image_rotate_180 { 
    transform-origin: top left; /* IE 10+, Firefox, etc. */ 
    -webkit-transform-origin: top left; /* Chrome */ 
    -ms-transform-origin: top left; /* IE 9 */ 

    transform: rotate(180deg) translateX(-100%) translateY(-100%); 
    -webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%); 
    -ms-transform: rotate(180deg) translateX(-100%) translateY(-100%); 
}

現在使用img標籤的類屬性這裏面的類名。

<img src="xyz.jpg" id="image" class="image_rotate_90"/>

對於-90旋轉和+90有時你會需要改變其高度和或者與屏幕分辨率或原圖像分辨率，使圖像將保留其原來的形狀的寬度。加載圖像後，在body標籤內使用javascript進行操作。

<script> 
    document.getElementById("image").width = screen.height; 
    document.getElementById("image").height = screen.width; 
</script>

假設您的原始圖像是640 x 480分辨率。即寬度= 480和高度= 640.所以，當你旋轉圖像時，它將成爲一個分辨率爲480 X 640的圖像。所以保留它的原始形狀。加載圖像後，您可以在body標籤下執行以下操作。

<script> 
    document.getElementById("image").width = 480px; 
    document.getElementById("image").height = 640px; 
</script>

來源

2015-09-12 13:42:53

如何在Javascript或CSS中旋轉圖像

回答

相關問題