2017-02-12 4 views
0

我想使用CSS將角度旋轉360度(甚至> 360度)。旋轉的中心是「右中心」。如果使用用於通過180度的旋轉下面的CSS代碼(和觸發用JavaScript旋轉)能正常工作:CSS旋轉360度

.animated.rotation { 
    -webkit-animation-duration: 9s; 
    animation-duration: 9s; 
} 

@keyframes rotation { 
     from { 
    -webkit-transform-origin: right center; 
    transform-origin: right center; 
    opacity: 1; 
    -webkit-animation-timing-function: linear; 
    } 

to { 
    -webkit-transform-origin: right center; 
    transform-origin: right center; 
    -webkit-transform: rotate3d(0, 0, 1, 180deg); 
    transform: rotate3d(0, 0, 1, 180deg); 
    opacity: 1; 
    -webkit-animation-timing-function: linear; 
    } 
} 

.rotation { 
    animation-name: rotation; 
} 

但是,如果我的角度替換180度> = 360度它贏得」工作了。例如,在360度的情況下,由於起始位置等於旋轉的結束位置,所以不會發生任何事情。

如何實現360度或更多的旋轉?

+0

由於您使用關鍵幀,您需要設置動畫持續時間https://developer.mozilla.org/en-US/docs/Web/CSS/animation –

+0

是的,我還設置了一段動畫持續時間:.animated.rotation {動畫|動畫|動畫|動畫|動畫|動畫|動畫| - 工作時間:9s; 動畫持續時間:9s; }但是,這不適用於360度。 – Tall83

+0

更新您的代碼以顯示它雖然... –

回答

0

由於我們沒有工作的代碼片段,我在這裏做一個了張貼的CSS,你應該能夠做到像這樣

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    border-top-left-radius: 10px; 
 
    margin: 50px; 
 
} 
 
.animated.rotation { 
 
    -webkit-animation-duration: 4s; 
 
    animation-duration: 4s; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-name: rotation; 
 
    animation-name: rotation; 
 
    -webkit-animation-iteration-count: infinite; 
 
    animation-iteration-count: infinite; 
 
    transform-origin: right center; 
 
} 
 

 
@keyframes rotation { 
 
    from { 
 
    -webkit-transform: rotate3d(0, 0, 1, 0deg); 
 
    transform: rotate3d(0, 0, 1, 0deg); 
 
    } 
 

 
    to { 
 
    -webkit-transform: rotate3d(0, 0, 1, 360deg); 
 
    transform: rotate3d(0, 0, 1, 360deg); 
 
    } 
 
}
<div class="animated rotation"></div>