CSS旋轉360度

我想使用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度或更多的旋轉？

來源

2017-02-12 Tall83

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

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

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

由於我們沒有工作的代碼片段，我在這裏做一個了張貼的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>

來源

2017-02-12 19:22:45 LGSon

CSS旋轉360度

回答

相關問題