CSSでdivの周りを回転するアニメーション

Question

私は、この画像のように内側のdivの周りを四角く回転するcss + jsでアニメーションを作成する方法を理解しようとしています。私はそれが可能であるかどうか疑問に思っています。なぜなら、コーナーで他のすべての側面へのロールオーバーのためです。

Answer 1

グーグルは、ソリューションを作成しようとする試みではありません。グーグルは、他の誰かが一生懸命働いた解決策を見つける試みです。

誰かがあなたのために仕事をしたいと思うようです。

私はあなたに基本的な概念の例を挙げています。私はあなたが探しているものを知っていると思うが、明らかにその目標のために働きたくないので、私はどちらもしない。あなた自身の努力を実証するまで、これはあなたが私から手に入れているすべてのものです。

http://codepen.io/anon/pen/BzQzXe

#square { 
    position: relative; 
    height: 5vmin; 
    width: 5vmin; 
    border: 1px solid blue; 
    margin: 0; 
    padding: 3vmin; 
    overflow: hidden; 
    animation-duration: 12s; 
    animation-name: movesquare; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
} 

@keyframes movesquare { 
    0% { 
    margin: 0; 
    } 
    25% { 
    margin: 85% 0 0 0; 
    } 
    50% { 
    margin: 85% 0 0 85%; 
    } 
    75% { 
    margin: 0 0 0 85%; 
    } 
    87.5%{ 
    } 
    100% { 
    margin: 0; 
    transform:rotateZ(1800deg); 
    } 
}