円のアイコン/イメージは、円の回転とともに回転します

Question

円の回転に問題があります。

問題： - 円がいくつかある外側の円があります。そしていくつかのサークルにはイメージがあります。しかし、サークルの回転では、私は欲しくないイメージも回転されます。イメージは円のdiv内に固定する必要があります。

.circular_blue { 
 

 
height: 400px; 
 

 
width:400px; 
 

 
-webkit-animation-name: spin_1; 
 

 
-webkit-animation-duration: 40000ms; 
 

 
-webkit-animation-iteration-count: infinite; 
 

 
-webkit-animation-timing-function: linear; 
 

 
-moz-animation-name: spin_1; 
 

 
-moz-animation-duration: 40000ms; 
 

 
-moz-animation-iteration-count: infinite; 
 

 
-moz-animation-timing-function: linear; 
 

 
-ms-animation-name: spin_1; 
 

 
-ms-animation-duration: 40000ms; 
 

 
-ms-animation-iteration-count: infinite; 
 

 
-ms-animation-timing-function: linear; 
 

 
animation-name: spin_1; 
 

 
animation-duration: 40000ms; 
 

 
animation-iteration-count: infinite; 
 

 
animation-timing-function: linear; 
 

 
} 
 

 
@-ms-keyframes spin_1 { 
 

 
from { -ms-transform: rotate(0deg); } 
 

 
to { -ms-transform: rotate(360deg); } 
 

 
} 
 

 
@-moz-keyframes spin_1 { 
 

 
from { -moz-transform: rotate(0deg); } 
 

 
to { -moz-transform: rotate(360deg); } 
 

 
} 
 

 
@-webkit-keyframes spin_1 { 
 

 
from { -webkit-transform: rotate(0deg); } 
 

 
to { -webkit-transform: rotate(360deg); } 
 

 
} 
 

 
@keyframes spin_1 { 
 

 
from { 
 

 
transform:rotate(0deg); 
 

 
} 
 

 
to { 
 

 
transform:rotate(360deg); 
 

 
} 
 

 
} 
 

 
.circular_reverse{ 
 

 
height: 200px; 
 

 
width:200px; 
 

 
position: absolute; 
 

 
top: 24%; 
 

 
left: 7%; 
 

 
-webkit-animation-name: spin_2; 
 

 
-webkit-animation-duration: 40000ms; 
 

 
-webkit-animation-iteration-count: infinite; 
 

 
-webkit-animation-timing-function: linear; 
 

 
-moz-animation-name: spin_2; 
 

 
-moz-animation-duration: 40000ms; 
 

 
-moz-animation-iteration-count: infinite; 
 

 
-moz-animation-timing-function: linear; 
 

 
-ms-animation-name: spin_2; 
 

 
-ms-animation-duration: 40000ms; 
 

 
-ms-animation-iteration-count: infinite; 
 

 
-ms-animation-timing-function: linear; 
 

 
animation-name: spin_2; 
 

 
animation-duration: 40000ms; 
 

 
animation-iteration-count: infinite; 
 

 
animation-timing-function: linear; 
 

 
} 
 

 
@-ms-keyframes spin_2 { 
 

 
from { -ms-transform: rotate(360deg); } 
 

 
to { -ms-transform: rotate(0deg); } 
 

 
} 
 

 
@-moz-keyframes spin_2 { 
 

 
from { -moz-transform: rotate(360deg); } 
 

 
to { -moz-transform: rotate(0deg); } 
 

 
} 
 

 
@-webkit-keyframes spin_2 { 
 

 
from { -webkit-transform: rotate(360deg); } 
 

 
to { -webkit-transform: rotate(0deg); } 
 

 
} 
 

 
@keyframes spin_2 { 
 

 
from { 
 

 
transform:rotate(360deg); 
 

 
} 
 

 
to { 
 

 
transform:rotate(0deg); 
 

 
} 
 

 
}

<div class="circular_blue"> 
 

 
<div style="height:400px;width:400px;border:3px dotted red;;border-radius:50%;/*! position: absolute; */"> 
 

 
<div style="height: 100px;width: 100px;background: #c6b7b7;border-radius: 50%;/*! display: table; */position: relative;"> 
 

 
<img src="http://lorempixel.com/100/100/city/" style="height: 50px;position: absolute;z-index: 999999;top: 27%;/*! display: table-cell; *//*! vertical-align: middle; *//*! width: 50px; */left: 24%;"> 
 

 
</div> 
 

 
</div> 
 

 
</div>

何が欲しいの外側の円を回転させると、内円はなく、画像/アイコンのない回転に伴って回転するべきです。

助けがあれば助かります。

ありがとうございます。

Answer 1

あなたはすべての画像に逆にそれを実行することにより、アニメーションの効果を「元に戻す」ことができます。しかし

.circular_blue img { 
    animation-direction: reverse; 
    // other animation stuff 
} 

、私はあなたが-<browser>-animation-<stuff>行のトンを持っているあなたのコードに気づいたので、私は、私が思いましたあなたが一度にすべてを設定することができますa shorthand -<browser>-animation propertyがあることを言及します：

.circular_blue img { 
 
    -webkit-animation: 40s linear infinite reverse spin_1; 
 
    -moz-animation: 40s linear infinite reverse spin_1; 
 
    -ms-animation: 40s linear infinite reverse spin_1; 
 
    animation: 40s linear infinite reverse spin_1; 
 
} 
 

 
.circular_blue { 
 
    height: 400px; 
 
    width: 400px; 
 
    -webkit-animation: 40s linear infinite spin_1; 
 
    -moz-animation: 40s linear infinite spin_1; 
 
    -ms-animation: 40s linear infinite spin_1; 
 
    animation: 40s linear infinite spin_1; 
 
} 
 

 
@-ms-keyframes spin_1 { 
 
    from { -ms-transform: rotate(0deg); } 
 
    to { -ms-transform: rotate(360deg); } 
 
} 
 
@-moz-keyframes spin_1 { 
 
    from { -moz-transform: rotate(0deg); } 
 
    to { -moz-transform: rotate(360deg); } 
 
} 
 
@-webkit-keyframes spin_1 { 
 
    from { -webkit-transform: rotate(0deg); } 
 
    to { -webkit-transform: rotate(360deg); } 
 
} 
 
@keyframes spin_1 { 
 
    from { transform: rotate(0deg); } 
 
    to { transform: rotate(360deg); } 
 
}

<div class="circular_blue"> 
 
    <div style="height:400px;width:400px;border:3px dotted red;;border-radius:50%;/*! position: absolute; */"> 
 
    <div style="height: 100px;width: 100px;background: #c6b7b7;border-radius: 50%;/*! display: table; */position: relative;"> 
 
     <img src="http://lorempixel.com/100/100/city/" style="height: 50px;position: absolute;z-index: 999999;top: 27%;/*! display: table-cell; *//*! vertical-align: middle; *//*! width: 50px; */left: 24%;"> 
 
    </div> 
 
    </div> 
 
</div>