如何在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的旋转角度？

回答

相关问题