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度

回答

相关问题