CSS rotation of color circle

HTML

<div class="sec_wrap dial_wrap hand">

</div>
<div class="min_wrap dial_wrap hand">

</div>
<div class="hour_wrap dial_wrap hand">

</div>
<div class="mark_1 dial_wrap">
<div class="mark">12
</div>
</div>
<div class="mark_2 dial_wrap">
<div class="mark">1
</div>
</div>
<div class="mark_3 dial_wrap">
<div class="mark">2
</div>
</div>
<div class="mark_4 dial_wrap">
<div class="mark">3
</div>
</div>
<div class="mark_5 dial_wrap">
<div class="mark">4
</div>
</div>
<div class="mark_6 dial_wrap">
<div class="mark">5
</div>
</div>
<div class="mark_7 dial_wrap">
<div class="mark">6
</div>
</div>
<div class="mark_8 dial_wrap">
<div class="mark">7
</div>
</div>
<div class="mark_9 dial_wrap">
<div class="mark">8
</div>
</div>
<div class="mark_10 dial_wrap">
<div class="mark">9
</div>
</div>
<div class="mark_11 dial_wrap">
<div class="mark">10
</div>
</div>
<div class="mark_12 dial_wrap">
<div class="mark">11
</div>
</div>

CSS

body {
    position:relative;
    min-height:100%;
}
div.clock_wrap
{
   position:relative;
    position:absolute;
    top:100px;
    left:49%;
    width:220px;
    height:220px;
    border:2px solid #999;
    border-style: solid;
    border-radius:220px;    
}
div.dial_wrap
{
   position:relative;
    position:absolute;
    top:50px;
    left:50px;
    width:200px;
    height:200px; 
    border-radius:100px;  

}
div.sec_wrap:after {
    width: 2px;
    height: 100px;
    content: '';
    background: #f00;
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
}

div.min_wrap:after {
    width: 4px;
    height: 100px;
    content: '';
    background: #333;
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
}
div.hour_wrap:after {
    width: 6px;
    height: 70px;
    content: '';
    background: #333;
    display: block;
    position: absolute;
    left: 50%;
    top: 30px;
}
div.mark
{
  width:2px;
  height:10px;
 /* background:#999999;*/
  display:block;
  position:absolute;
  top:-5px;
  left:95px;
}
div.sec_wrap {      
    animation-duration: 60000ms;  
}
div.min_wrap {
    animation-duration: 3600000ms;
}
div.hour_wrap {
     animation-duration: 43200000ms;
}
div.hand{
    animation-name: example;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
div.mark_1 {
transform: rotate(00deg)

}
div.mark_2 {
transform: rotate(30deg)

}
div.mark_3 { 
transform: rotate(60deg)

}
div.mark_4 {   
transform: rotate(90deg)

}
div.mark_5 {   
transform: rotate(120deg)

}
div.mark_6 {   
transform: rotate(150deg)

}
div.mark_7 {   
transform: rotate(180deg)

}
div.mark_8 {
transform: rotate(210deg)

}
div.mark_9 { 
transform: rotate(240deg)

}
div.mark_10 {    
transform: rotate(270deg)

}
div.mark_11 { 
transform: rotate(300deg)

}
div.mark_12 {
transform: rotate(330deg);
}

@keyframes example {
    0% {transform: rotate(0deg);}    
   100% {transform: rotate(360deg);}
}

JavaScript

$(document).ready(function(){
	$(".sec_wrap").css("transform","rotate(80deg)");
});