Question

如何使我的css 3 div随机旋转7度或14度，但如果是14度，则不能为7度，反之亦然。

我有这段代码：

.foo {
background:#fefabc;7
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
} `

那么，我怎么能让它随机旋转14度所以它是7度或14度。

我不介意如何做到这一点，只要它完成了。

谢谢，我尽量保持清醒。

Answer 1

由于CSS不是动态语言，因此必须使用javaScript来实现目标。但是您需要将样式与javaScript代码分开。所以解决方案就是：

首先为旋转7或14类创建两个类：

.deg7 {
/*This rotates 7 degree*/
} 

.deg14 {
/*This rotates 14 degree*/
}

然后，您加载要旋转的元素并随机添加类名

$('.rotating_element').each(function () {
  $(this).addClass(Math.random() > 0.5 ? 'deg7' : 'deg14');
});

Answer 2

我不知道你是否可以在CSS中做到这一点，但如果你也使用JavaScript。

这样的事情：

<script language="javascript" type="text/javascript">
function rotate(){
  var deg;
  if(Math.random() * 2 > 1){
   deg= "7deg";
  }else{
   deg= "14deg";
  }
   document.getElementByClass('foo').style.rotate(deg);
}

CSS3随机旋转7度或14度

2 个答案: