如何使用css更改球體加班位置

Question

我是CSS新手，仍然沒有得到很多東西！使用只有 CSS動畫我必須創建一個輪盤上的旋轉動畫。我必須創建一個球體和作爲背景使用輪盤賭img。我的問題是，如何改變每10％動畫的球體位置，以便圍繞輪盤旋轉一圈。 這是我使用爲背景的IMG：http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif

HTML：

<div id="roulette"> 
<figure class="circle"></figure> 
</div> 

CSS：

#roulette{ 
    background-image: url("american-roulette-wheel.gif"); 
    width:395px; 
    height:400px; 
    margin:0; 
} 
.circle { 
    position:fixed; 
    top:84px; 
    left:190px; 
    border-radius: 50%; 
    height: 30px; 
    width: 30px; 
    margin:0; 
    background: radial-gradient(circle at 10px 10px, #5cabff, #000); 
} 

謝謝！

Answer 1

通過將您的球/圓形圖像放在容器div中並旋轉該div，您可以創建圍繞背景傳播的球的幻覺。你將不得不玩弄定位來準確地確定它，並且旋轉球以及容器div也許很酷。

<div id="roulette"> 
    <div class="circleContainer"> 
     <figure class="circle"></figure> 
    </div> 
</div> 

#roulette{ 
    background-image: url(http://www.casinoanswers.com/wp-content/uploads/2010/03/american-roulette-wheel.gif); 
    width:395px; 
    height:400px; 
    margin:0; 
} 
.circle { 
    border-radius: 50%; 
    height: 30px; 
    width: 30px; 
    margin:0; 
    background: radial-gradient(circle at 10px 10px, #5cabff, #000); 
} 
@-webkit-keyframes spinnerRotate 
{ 
    from{-webkit-transform:rotate(0deg);} 
    to{-webkit-transform:rotate(360deg);} 
} 
@-moz-keyframes spinnerRotate 
{ 
    from{-moz-transform:rotate(0deg);} 
    to{-moz-transform:rotate(360deg);} 
} 
@-ms-keyframes spinnerRotate 
{ 
    from{-ms-transform:rotate(0deg);} 
    to{-ms-transform:rotate(360deg);} 
} 
.circleContainer{ 
    height: 250px; 
    top: 80px; 
    position: fixed; 
    left: 190px; 
    -webkit-animation-name: spinnerRotate; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: spinnerRotate; 
    -moz-animation-duration: 5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name: spinnerRotate; 
    -ms-animation-duration: 5s; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 
} 

https://jsfiddle.net/2gat1m5y/1/