360度のCSS回転

Question

CSSを使用して360度（または> 360度）の角度で矩形を回転したいとします。回転中心は「右中央」です。私は（とJavaScriptで回転を誘発する）180度回転のために、以下のCSSコードを使用する場合には、正常に動作します：

.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; 
} 

しかし、私は角度> = 360度、180度を交換した場合それは勝ちましたもう仕事はありません。例えば、360度の場合、開始位置は回転の終了位置と等しいため、何も起こりません。

回転を360度以上で実装するにはどうすればよいですか？

Answer 1

我々は作業コードスニペットを持っていないので、ここで私が掲示CSSで最大1を作り、あなたが使用しているので、あなたがこの

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>