如何在javascript中設置div的旋轉角度？

或者更一般地說，是否有一種方法可以將任意CSS添加到JavaScript中沒有JQuery的HTML元素？如何在javascript中設置div的旋轉角度？

此時此功能適用於Chrome，Firefox和IE 9/10。

var css = getRotationCSS(angle); 
var div = document.getElementById('mydiv'); 
//div.css = css; ??? 
div.innerHTML = '<div style="'+css+'">HELLO</div>';

我要補充的DIV中一個div去的風格我看過只是有一個硬編碼的角度，但我需要它的任何角度0-工作=「」

所有的例子360，我應該做360個班，每個學位1個，然後設置班級？

function getRotationCSS(deg) 
{ 
    return "\ 
     -webkit-transform: rotate("+deg+"deg); \ 
     -moz-transform: rotate("+deg+"deg); \ 
     -ms-transform: rotate("+deg+"deg); \ 
     -o-transform: rotate("+deg+"deg); \ 
     transform: rotate("+deg+"deg); \ 
     -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)'; \ 
     filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); \ 
    "; 
}

是的IE 7/8代碼是不正確的，我需要一個函數轉換度矩陣。

另外，IE 7/8的代碼根本不會當我在IE 10模仿IE 7/8旋轉它，我用Google搜索的代碼，它應該由45旋轉它：

<html> 
    <body> 
     <div style='border:1px solid green;margin:333px;padding:333px;'> 
      <div style=" 
       -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
       -ms-transform: rotate(45deg); 
       -o-transform: rotate(45deg); 
       transform: rotate(45deg); 
       -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)\"; 
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); 
      "> 
       HELLO 
      </div> 
     </div> 
    </body> 
</html>

來源

2013-05-16 Curtis

難道你不知道哪個css轉換通過JavaScript應用（使用功能檢測）？ – Alan

沒有js小提琴？什麼？：O – Senjai

使用以下方法來創建正確的旋轉矩陣爲deg：

// First compute deg in radians 
var rad = deg*Math.PI/180; 

// Then when specifying the rotation matrices use: 
'... M11=' + Math.cos(rad) + 
    ', M12=' + -Math.sin(rad) + 
    ', M21=' + Math.sin(rad) + 
    ', M22=' + Math.cos(rad) + ' ...'

也爲ms-filter不使用單引號，因爲你在字符串中使用單引號'auto expand'您的外引號改爲雙引號和正確轉義：

-ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', ...

來源

2013-05-16 02:41:30 Paulpro

感謝您的提示，但它仍然沒有在IE 7或8中旋轉。我添加了一個完整的html示例。 – Curtis

此代碼旋轉-45度

在7-8，即太

。

<div style=" 
    width: 200px; 
    height: 14px; 
    border: none; 
    background-image: url(http://image.ohozaa.com/i/47d/vliemC.png); 
    text-align: center; 
    color: #fff; 
    font-size: 14px; 
    line-height: 16px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M22=0.7071067811865476, M21=-0.7071067811865475, M12=0.7071067811865475, M11=0.7071067811865476); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M22=0.7071067811865476, M21=-0.7071067811865475, M12=0.7071067811865475, M11=0.7071067811865476)"; /* IE8 */ 
    transform: rotate(-45deg); 
"> 
</div> 
<style type="text/css"> 
</style>

來源

2014-03-13 13:48:27 user3282833

如何在javascript中設置div的旋轉角度？

回答

相關問題