CSS 변환 : 회전, 앞으로 뒤로

Question

내가 가지고 있지 회전 다음 CSS를 :

#pie .slice.rot1 { 
     -webkit-transform:rotate(0deg); 
     -moz-transform:rotate(0deg); 
     -m-transform:rotate(0deg); 
     -o-transform:rotate(0deg); 
     -transform:rotate(0deg); 

} 
#pie .slice.rot2 { 
     -webkit-transform:rotate(52.5deg); 
     -moz-transform:rotate(52.5deg); 
     -m-transform:rotate(52.5deg); 
     -o-transform:rotate(52.5deg); 
     -transform:rotate(52.5deg); 

} 
#pie .slice.rot3 { 
     -webkit-transform:rotate(104deg); 
     -moz-transform:rotate(104deg); 
     -m-transform:rotate(104deg); 
     -o-transform:rotate(104deg); 
     transform:rotate(104deg); 

} 
#pie .slice.rot4 { 
     -webkit-transform:rotate(154.5deg); /* (360/7) * 3 = 51.5 */ 
     -moz-transform:rotate(154.5deg); /* (360/7) * 3 = 51.5 */ 
     -m-transform:rotate(154.5deg); /* (360/7) * 3 = 51.5 */ 
     -o-transform:rotate(154.5deg); /* (360/7) * 3 = 51.5 */ 
     transform:rotate(154.5deg); /* (360/7) * 3 = 51.5 */ 
} 
#pie .slice.rot5 { 
     -webkit-transform:rotate(204deg); /* (360/7) * 4 = 51.5 */ 
     -moz-transform:rotate(204deg); /* (360/7) * 4 = 51.5 */ 
     -m-transform:rotate(204deg); /* (360/7) * 4 = 51.5 */ 
     -o-transform:rotate(204deg); /* (360/7) * 4 = 51.5 */ 
     transform:rotate(204deg); /* (360/7) * 4 = 51.5 */ 
} 
#pie .slice.rot6 { 
     -webkit-transform:rotate(254.5deg); /* (360/7) * 5 = 51.5 */ 
     -moz-transform:rotate(254.5deg); /* (360/7) * 5 = 51.5 */ 
     -m-transform:rotate(254.5deg); /* (360/7) * 5 = 51.5 */ 
     -o-transform:rotate(254.5deg); /* (360/7) * 5 = 51.5 */ 
     transform:rotate(254.5deg); /* (360/7) * 5 = 51.5 */ 
} 
#pie .slice.rot7 { 
     -webkit-transform:rotate(307deg); /* (360/7) * 6 = 51.5 */ 
     -moz-transform:rotate(307deg); /* (360/7) * 6 = 51.5 */ 
     -m-transform:rotate(307deg); /* (360/7) * 6 = 51.5 */ 
     -o-transform:rotate(307deg); /* (360/7) * 6 = 51.5 */ 
     transform:rotate(307deg); /* (360/7) * 6 = 51.5 */ 
} 

이, 기본적으로하지 않습니다 당신이 클릭 DIV하는 섹션 /에

따라 이미지를 회전 무엇 내. 이미지는 현재 7 개의 섹션이있는 원입니다. 내 페이지를로드 할 때 .rot1 클래스가 이미 선택되었습니다. .rot2를 선택하면 이미지가 52.5 도로 회전하고 그 반대의 경우도 마찬가지입니다.

내 문제는 360deg에서 .rot7에 도달 한 다음 0rdg로 앞으로 회전하는 이미지보다는 .rot1을 클릭하면 뒤로 돌아가서 -360deg를 회전시킵니다.

내가 앞으로 회전 할 수있는 방법에 대한 아이디어가 있습니까? 내가 선택한 한

건배, 댄

Answer 1

가 수행하는 그 전환의 회전과 서로에 대한 클래스를 사용하여. 그리고 두 개의 div를 사용하여 스크립트에서 더 쉽게 만들 수 있도록 각각 하나의 클래스 만 가질 수 있도록합니다.

html로

<div id="pie" class="rotate"> 
<div id="pos" class="rot0"> 
<div class="rot0" onclick="myFunction(0)">1</div> 
<div class="rot6" onclick="myFunction(1)">2</div> 
<div class="rot5" onclick="myFunction(2)">3</div> 
<div class="rot4" onclick="myFunction(3)">4</div> 
<div class="rot3" onclick="myFunction(4)">5</div> 
<div class="rot2" onclick="myFunction(5)">6</div> 
<div class="rot1" onclick="myFunction(6)">7</div> 

CSS의

#pie { 
width: 200px; 
height: 200px; 
left: 35px; 
top: 35px; 
position: absolute; 
background-color: papayawhip; 
border-radius: 50%; 
} 

#pos div { 
    background-color: lightblue; 
left: 0px; 
top: 100px;  
width: 30px; 
height: 30px; 
position: absolute; 
-webkit-transform-origin: 100px 0px; 
    border-radius: 50%; 
} 

#pos { 
    width: 100%; 
    height: 100%; 
} 

#pie .rot0 { 
    -webkit-transform:rotate(0deg); 
    -transform:rotate(0deg); 
} 
#pie .rot1 { 
    -webkit-transform:rotate(52.5deg); 
    -transform:rotate(52.5deg); 

} 
#pie .rot2 { 
    -webkit-transform:rotate(104deg); 
    transform:rotate(104deg); 
} 
#pie .rot3 { 
    -webkit-transform:rotate(154.5deg); 
    transform:rotate(154.5deg); 
} 
#pie .rot4 { 
    -webkit-transform:rotate(204deg); 
    transform:rotate(204deg); 
} 
#pie .rot5 { 
    -webkit-transform:rotate(254.5deg); /* (360/7) * 5 = 51.5 */ 
    transform:rotate(254.5deg); /* (360/7) * 5 = 51.5 */ 
} 
#pie .rot6 { 
    -webkit-transform:rotate(307deg); /* (360/7) * 6 = 51.5 */ 
    transform:rotate(307deg); /* (360/7) * 6 = 51.5 */ 
} 


.rotate1 { 
    -webkit-animation: circle1 2s 1 linear;  
    -webkit-transform-origin: 50% 50%; 
} 
@-webkit-keyframes circle1 { 
    from {-webkit-transform: rotateZ(-52.5deg)} 
    to {-webkit-transform: rotateZ(0deg)} 
} 

.rotate2 { 
-webkit-animation: circle2 4s 1 linear;  
-webkit-transform-origin: 50% 50%; 
} 
@-webkit-keyframes circle2 { 
from {-webkit-transform: rotateZ(-104deg)} 
to {-webkit-transform: rotateZ(0deg)} 
} 

.rotate3 { 
-webkit-animation: circle3 6s 1 linear;  
-webkit-transform-origin: 50% 50%; 
} 
@-webkit-keyframes circle3 { 
from {-webkit-transform: rotateZ(-154.5deg)} 
to {-webkit-transform: rotateZ(0deg)} 
} 

.rotate4 { 
-webkit-animation: circle4 8s 1 linear;  
-webkit-transform-origin: 50% 50%; 
} 
@-webkit-keyframes circle4 { 
from {-webkit-transform: rotateZ(-204deg)} 
to {-webkit-transform: rotateZ(0deg)} 
} 

.rotate5 { 
-webkit-animation: circle5 10s 1 linear;  
-webkit-transform-origin: 50% 50%; 
} 
@-webkit-keyframes circle5 { 
from {-webkit-transform: rotateZ(-254deg)} 
to {-webkit-transform: rotateZ(0deg)} 
} 
.rotate6 { 
-webkit-animation: circle6 12s 1 linear;  
-webkit-transform-origin: 50% 50%; 
} 
@-webkit-keyframes circle6 { 
from {-webkit-transform: rotateZ(-307deg)} 
to {-webkit-transform: rotateZ(0deg)} 
} 

그리고 자바 스크립트

var pos=0; 

function myFunction(newpos) { 
var delta=newpos-pos; 
if (delta < 0) { delta = delta + 7;} 
pos=newpos; 
document.getElementById("pos").className="rot"+newpos; 
document.getElementById("pie").className="rotate"+delta; 
document.getElementById("pie").addEventListener('webkitAnimationEnd', function(){ 
this.className=''; 
}, false); 

} 

Demo for webkit