CSS 3 임의로 7도 또는 14도 회전

Question

CSS 3 div를 임의로 7도 또는 14도 회전시킬 수 있지만 14 도인 경우 7 도가 될 수 없으며 반대의 경우도 가능합니다.

는이 코드를 가지고 :이 중 7 또는 14도 그래서 나는 randomnly이 회전 14 개도를 만들 수있는 방법

그래서

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

.

이 작업이 수행되는 한이 작업을 수행하는 방법에 신경 쓰지 않습니다.

감사합니다. 가능한 한 명확하게하려고 노력했습니다.

Answer 1

동적 언어가 아닙니다, 당신은 당신의 목표를 실현하기 위해 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로만이 작업을 수행 할 수 있는지 알지 못하지만 자바 스크립트를 함께 사용하는 경우에는 알지 못합니다. 이 같은

뭔가 : CSS로

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