CSS變換：旋轉僅適用於圖像

我有這樣的代碼：CSS變換：旋轉僅適用於圖像

<html> 
<head> 
    <script type = "text/javascript" src = "jquery-1.7.1.js"></script> 
    <script type = "text/javascript" src = "jquery-ui-1.8.18.custom.min.js"></script> 
</head> 
<body> 
    <div id = "div" onclick = "Rotate()"> 
     <img src="image.png" height="40" width="160"> 
    </div> 

    <script type="text/javascript"> 
     var x = 1; 
     function Rotate() { 
      var angle = (90 * x); 
      $("div").css("-moz-transform", 
         "rotate(" + angle + "deg)");   
     x++;  
    }</scipt></body></html>

使用Rotate()腳本時，該div恍如被旋轉，但與螢火蟲viewd，我可以看到div仍處於相同的位置。我做錯了什麼，或者我正在嘗試完成的任務使用錯誤的東西？

編輯：

感謝您的回覆！我將背景設置爲黃色，並且它變成了黃色框，但是當點擊Firebug中的div名稱時，它表明div仍然處於原始位置。 lightblue is the original position of the div

來源

2012-03-19 Vlad

要麼你打電話的onclick =「旋轉（）」在img標籤，否則你應該寫CSS（寬度和高度），以您的DIV上你正在調用onclick =「旋轉（）」 – defau1t 2012-03-19 20:28:30

嘿我更新了我的例子，你的代碼的鏈接工作正常。我認爲你對螢火蟲感到困惑，因爲它顯示了原始位置上的div。變換實際上並不移動元素的位置，至少不會影響其他元素，所以當它移動時，佈局引擎不需要知道它！ – 2012-03-23 15:59:18

這絕對是適用於<div>。只需在div上添加寬度和背景顏色即可看到它正常工作。

Here's an example我扔在一起懸停旋轉：

HTML：

<div id="awesome"> 
    <img src="/img/logo.png"> 
</div>

CSS：

body { 
    margin: 100px; 
} 

div { 
background: blue; 
width: 200px; 
-webkit-transition: all ease-in 1s; 
-moz-transition: all ease-in 1s;  
transition: all ease-in 1s; 
} 

div:hover { 
background: yellow; 
-moz-transform: rotate(30deg); 
-webkit-transform: rotate(30deg); 
transform: rotate(30deg); 
}

這裏的一些info how to use the css3 transform property

有是一個jQuery插件，我發現有一個例子可以做到y你在做，但以一種交叉的方式。退房： https://github.com/heygrady/transform

這個插件讓我們你做這樣的事情：

$('div').click(function() { 
    $(this).animate({rotate: '+=45deg'}); 
});

編輯：

嘿，這是工作正常原件的稍微清理版本：

http://jsfiddle.net/UdYKb/1/

螢火蟲沒有顯示變化的原因是因爲規範，它說：「變換屬性不會影響轉換元素周圍內容的流動。」 http://dev.w3.org/csswg/css3-transforms/

來源

2012-03-19 20:31:05

+1喜歡你的例子:)它總是很高興看到其他解決方案！ – Neysor 2012-03-19 20:47:26

看this example 3旋轉圖片

HTML：

<div id = "div"> 
    <img src="http://dummyimage.com/100" class="rp" data-rotate="0"> 
    <img src="http://dummyimage.com/100" class="rp" data-rotate="0"> 
    <img src="http://dummyimage.com/100" class="rp" data-rotate="0"> 
</div>

JAVASCRIPT：

$().ready(function() { 
    $(".rp").click(function() { 
     var rot = (parseInt($(this).attr("data-rotate"))+90)%360; 
     $(this).attr("data-rotate",rot); 
     $(this).css("-webkit-transform", "rotate("+rot+"deg)"); 
     $(this).css("-moz-transform", "rotate("+rot+"deg)"); 
    }); 
});

我保存的最後一個旋轉中的屬性data-rotate。如果你不明白爲什麼使用.rp :)，請閱讀CSS Selectors希望它有幫助。

PS：我用谷歌瀏覽器的CSS屬性-webkit-transform太:)

來源

2012-03-19 20:42:27 Neysor

好主意，但不要使用'attr（data-'use'.data（）'而不是！ – 2012-03-19 20:46:35

是的，我必須這樣做......不良行爲：D – Neysor 2012-03-19 20:47:56

CSS變換：旋轉僅適用於圖像

回答

相關問題