CSS旋转360度

Question

我想使用CSS将角度旋转360度（甚至> 360度）。旋转的中心是“右中心”。如果使用用于通过180度的旋转下面的CSS代码（和触发用JavaScript旋转）能正常工作：

.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度或更多的旋转？

Answer 1

由于我们没有工作的代码片段，我在这里做一个了张贴的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>