CSS 3はランダムに7度または14度のどちらかに回転します

Question

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

を、それがいずれかの7または14度であるので、どのように私はrandomnlyこの回転14度を作ることができます。

これが行われている限り、これを行う方法は気にしません。

ありがとう、私は可能な限り明確にしようとしました。

Answer 1

CSSが動的言語ではないとして、あなたの目標を実現するためにJavaScriptを使用する必要があります。しかし、スタイルをjavaScriptコードから分離する必要があります。あなたが回転しランダム

をクラス名を追加したい要素をロードし、その後

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

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

：

まずあなたは、両方の回転7つのまたは14のクラスの2つのクラスを作成しますので、解決策は、ということです

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