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 度，反之亦然。

我的问题是当我以 360 度到达 .rot7，然后单击 .rot1，而不是图像向前旋转到 0 度，它会向后旋转并旋转 -360 度。

知道如何让它向前而不是向后旋转吗？

干杯， 丹

Answer 1

我选择使用一个类进行旋转，另一个类用于过渡。 为了使脚本更容易，使用嵌套的 2 个 div，这样每个 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)}
}

还有 JavaScript

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