CSS/JAVASCRIPT旋转JAVASCRIPT问题

我有一个大问题：

我必须将

…

的背景图像旋转任意度数

我发现这段代码可以做到这一点，但仅限于css：

#foo:before
{
    transform: rotate(30deg);
}

---

现在我想在javascript中动态地做同样的事情。

不幸的是，您不能直接用javascript设置伪元素（CSS规则中的

：before

是一个伪元素，与DOM中任何真实的、可检索的元素都不匹配）

您唯一能做的就是使用

#foo:before

规则动态创建

元素，并将其附加到DOM:

function rotate(){
    var rotation, sheet, cssText;

    // Randomly choose a rotation and create the cssText rule (webkit)
    rotation = Math.floor(Math.random() * (350 - 10 + 1)) + 10;
    cssText = '#foo::before {-webkit-transform:rotate('+rotation+'deg); }';

    // Since we're rotating a pseudo-element, we need to create a stylesheet
    // since :before's cannot be directly manipulated
    sheet = document.createElement('style');
    sheet.type = 'text/css';
    sheet.media = 'screen';
    if(sheet.styleSheet)
        sheet.styleSheet.cssText = cssText;
    else
        sheet.appendChild(document.createTextNode(cssText));
    document.head.appendChild(sheet);
};

---

这里有一个JSFIDLE:

如果您可以使用jquery，请尝试使用这个以奇妙的方式旋转图像的小插件

---

html。将背景设置为“someElementInside”，并将其填充到父级宽度和高度的100%

<div id="elem">
  <div id="someElementInside">
  </div>
<div>

jquery

<script>

    var rotator = function(youDegreesValue){

        $("#someElementInside").css({'-webkit-transform' : 'rotate('+ youDegreesValue +'deg)',
                          '-moz-transform' : 'rotate('+ youDegreesValue +'deg)',
                          '-ms-transform' : 'rotate('+ youDegreesValue +'deg)',
                          'transform' : 'rotate('+ youDegreesValue +'deg)'});

    }



    $(document).ready(function(){


            $("#rotateButon").click(function(){

                rotator(120);   

            });

    });
</script>

变量旋转器=函数（youDegreesValue）{
$（“#someElementInside”）.css（{'-webkit transform'：'rotate（'+youDegreesValue+'deg'），
“-moz变换”：“旋转（'+youDegreesValue+'deg）”，
“-ms变换”：“旋转（'+youDegreesValue+'deg）”，
'变换'：'旋转（'+youDegreesValue+'deg'）；
}
$（文档）.ready（函数（）{
$（“#旋转按钮”）。单击（函数（）{
旋转器（120）；
});
});

谢谢，但我必须在头脑中定义什么？因为不起作用。@Anth在html中添加

rotate。然后单击它，u将运行旋转块的函数。另外，为什么在css中你需要旋转伪元素“before”，而在有问题的文本中你需要直接旋转div？我不想旋转div，而是旋转其中的背景图像。这是代码。请帮帮我。我写在上面-你可以将“element2”中需要的背景图像设置为“element2BG”。因此，element2将是
背景：无
，element2BG将是
背景图像
<代码>

将显示视觉效果same@Anth别忘了在头部添加jquery我的代码不起作用。。。这是我的代码，你能帮我解决问题吗？是的，你的CSS不起作用。没有运行的示例很难看到。。。但是，首先，您必须给

#element:before

一个

display:block

以像块元素一样工作，并使

z-index

为正。接下来，您的

#element 2

有一个

溢出：隐藏

，但随后您将

#element:放置在
前面
的外侧，其
顶部
和
左侧
为
-50%
。不过，这完全超出了我回答的你的问题范围。我已经提供了一个工作示例，请参见上面的JSFIDLE。您能调整我的代码吗？因为我不明白我必须做什么。抱歉。当然，这里有一个JSFIDLE和您的css/js/html（另外，我在
div
中添加了一个单击事件，它也会随机旋转图像）。谢谢，但我不知道为什么，但下次不起作用。。。。这是我在mi html文件中的内容，请您在pastebin的页面中更正我的代码，好吗？非常感谢。
<script>

    var rotator = function(youDegreesValue){

        $("#someElementInside").css({'-webkit-transform' : 'rotate('+ youDegreesValue +'deg)',
                          '-moz-transform' : 'rotate('+ youDegreesValue +'deg)',
                          '-ms-transform' : 'rotate('+ youDegreesValue +'deg)',
                          'transform' : 'rotate('+ youDegreesValue +'deg)'});

    }



    $(document).ready(function(){


            $("#rotateButon").click(function(){

                rotator(120);   

            });

    });
</script>