Obracanie wokół punktu

Question

Witam,

 

Jak sprawić, by "kreski" obracały sie równomiernie wokół koła i nie składamy się w harmonijkę?

http://jsbin.com/zivinucuqu/edit?html,css,output

Answer 1

Dość ciekawa zagwozdka, trochę pokombinowałem i coś tam wyszło: http://jsbin.com/qopiguqano/edit?html,css,output

Przeanalizuj kod :)

Answer 2

*
{
    margin:0;
    padding: 0;
}

body
{
    min-height: 100vh;
    background-color: #00ceae;
}

.container
{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100vh;
}

.circle
{
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background-color: #6c00ff;
    position: relative;
}

.radius
{
    height: 150px;
    width: 5px;
    background-color: #a8db00;
    position: absolute;
  
    top: 50%;
    left: calc(50% - 3px);

    -webkit-animation-name: radius1;
    -o-animation-name: radius1;
    animation-name: radius1;
    
    transform-origin: top;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  
}

.radius:nth-child(2)
{
    transform: rotate(90deg);
    -webkit-animation-name: radius2;
    -o-animation-name: radius2;
    animation-name: radius2;
    background-color: red;
  
}

.radius:nth-child(3)
{
    transform: rotate(180deg);
    -webkit-animation-name: radius3;
    -o-animation-name: radius3;
    animation-name: radius3;
    background-color: green;
}

.radius:nth-child(4)
{
    transform: rotate(270deg);
    -webkit-animation-name: radius4;
    -o-animation-name: radius4;
    animation-name: radius4;
    background-color: blue;
}

@keyframes radius1
{
    to
    {
        transform: rotate(360deg);
    }
}
@keyframes radius2
{
    to
    {
        transform: rotate(450deg);
    }
}
@keyframes radius3
{
    to
    {
        transform: rotate(540deg);
    }
}
@keyframes radius4
{
    to
    {
        transform: rotate(630deg);
    }
}

P.S. trochę masz to dziwnie napisane ale to jest moja opinia (zajrzyj do dokumentacji) - w każdym razie nie oceniam i nie poprawiam. Po moich poprawkach działa jak chciałeś.