CSS 3 поворачивается на 7 или 14 градусов случайно

Question

Как я могу заставить мой css 3 div поворачиваться на 7 градусов или 14 градусов случайно, но если это 14 градусов, то не может быть 7 градусов и наоборот.1003 *

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