1

私は次の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 度回転することです。

後方ではなく前方に回転させる方法について何か考えはありますか?

乾杯、ダン

4

1 に答える 1

0

回転用のクラスと遷移用の別のクラスを使用してそれを行うことを選択しました。また、スクリプトを簡単にするために、ネストされた 2 つの div を使用して、それぞれに 1 つのクラスしか持たないようにします。

HTML1

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

}

Webkit のデモ

于 2013-06-12T18:19:58.590 に答える