css - CSS 3 随机旋转 7 度或 14 度

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);
}