Анимация катящегося квадрата вокруг div в CSS

Question

Я пытаюсь выяснить, как сделать анимацию в css + js квадрата, вращающейся вокруг div, как на этой картинке. Мне интересно, возможно ли это, из-за опрокидывания на каждую другую сторону в углах.

Answer 1

Googling не попытка, чтобы попытаться создать решение. Googling попытка найти решение, что кто-то работал тяжело.

Похоже, вы просто хотите, чтобы кто-то выполнял эту работу за вас.

Я даю вам базовый концептуальный пример. Кажется, я знаю, что вы ищете, но вы явно не хотите работать для этой цели, поэтому я тоже этого не делаю. Это все, что вы получаете от меня, пока не продемонстрируете свои собственные усилия.

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