CSS3動畫：是否有可能讓一個div div與父div有相反的旋轉？

Question

編輯： 我稍微改變了它，讓他們爲正方形，而不是圈，因爲它指出，它會更容易明白我的意思

https://jsfiddle.net/i7708974/k3ebq7j0/

原文： 我一直在玩我正在做一個項目的CSS3動畫，但我認爲我的邏輯錯了。

我需要做兩件事情，創建一系列八個旋轉的圓形軌道並設置它，以便當您將鼠標懸停在八個圓圈中的任意一個圓圈上時，它們會暫停並保持與頁面打開時相同的方向。

我設法設置了八個圓形軌道，但還沒有能夠找出如何阻止每個單獨的圓形旋轉其方向。

我不知道這是可能的，但經過幾天的嘗試後決定是否有人在這裏可以幫助我，下面是代碼的jsfiddle鏈接（如果你將鼠標懸停在其中一個圓圈上，你應該看到四分之一它會在每次移動鼠標並重新移動時突出顯示並更改方向）。

https://jsfiddle.net/i7708974/xs7mcgdd/

我已經嘗試了兩種方法然而，改變方向，他們似乎並沒有做任何事情..

.Rm, .Tm, .P, .Sc, .Sf, .D, .R, .A{ 
-webkit-animation: wrapper 15s linear infinite normal; 
-moz-animation: wrapper 15s linear infinite normal; 
-ms-animation: wrapper 15s linear infinite normal; 
-o-animation: wrapper 15s linear infinite normal; 
animation: wrapper 15s linear infinite normal; 
} 

和..

.Rm, .Tm, .P, .Sc, .Sf, .D, .R, .A{ 
-webkit-animation: none; 
-moz-animation: none; 
-ms-animation: none; 
-o-animation: none; 
animation: none; 
} 

Answer 1

讓他們內部的集裝箱在一個方向旋轉，而每個方向都朝相反的方向旋轉：

body { 
 
    background-color: skyblue; 
 
} 
 

 
#container { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius:50%; 
 
    border: 4px solid lightblue; 
 
    position: relative; 
 
    animation-name: example; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 
#container div { 
 
    width:20px; 
 
    height: 20px; 
 
    outline: 2px solid red; 
 
    position: absolute; 
 
    animation-name: example2; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 
#a1 { 
 
    top:30px; 
 
    left:30px; 
 
} 
 

 
#a2 { 
 
    top:5px; 
 
    left:calc(50% - 10px); 
 
} 
 

 
#a3 { 
 
    top: 30px; 
 
    left:calc(100% - 50px); 
 
} 
 

 
#a4 { 
 
    top:calc(50% - 10px); 
 
    left:calc(100% - 25px); 
 
} 
 

 
#a5 { 
 
    top:calc(100% - 50px); 
 
    left:calc(100% - 50px); 
 
} 
 

 
#a6 { 
 
    top:calc(100% - 25px); 
 
    left:calc(50% - 10px); 
 
} 
 

 
#a7 { 
 
    top:calc(100% - 50px); 
 
    left: 30px; 
 
} 
 

 
#a8 { 
 
    top:calc(50% - 10px); 
 
    left:5px; 
 
} 
 

 
@keyframes example { 
 
    100% { 
 
    -ms-transform: rotate(360deg); /* IE 9 */ 
 
    -webkit-transform: rotate(360deg); /* Safari */ 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes example2 { 
 
    100% { 
 
    -ms-transform: rotate(-360deg); /* IE 9 */ 
 
    -webkit-transform: rotate(-360deg); /* Safari */ 
 
    transform: rotate(-360deg); 
 
    } 
 
} 
 

 
img { 
 
    width:20px; 
 
    height:20px; 
 
} 
 

 
#container:hover, #container:hover div { 
 
    -webkit-animation-play-state: paused; 
 
    -moz-animation-play-state: paused; 
 
    -ms-animation-play-state: paused; 
 
    -o-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
}

<div id=container> 
 
<div id=a1><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div> 
 
<div id=a2><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div> 
 
<div id=a3><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div> 
 
<div id=a4><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div> 
 
<div id=a5><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div> 
 
<div id=a6><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div> 
 
<div id=a7><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div> 
 
<div id=a8><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div> 
 
</div>

codepen