Html5 de Nesneleri Döndürme (rotation)

Html5 de Nesneleri Döndürme (rotation);

@-webkit-keyframes yerdegistir
    {
        0%
        {
             margin-left:0;
             margin-top:0;
             transform:rotate(180deg);
        }
        25%
        {
            margin-left:400px;
            margin-top:0;
            transform:rotate(90deg);
        }
        50%
        {
            margin-left:400px;
            margin-top:400px;
            transform:rotate(180deg);

        }
        75%
        {
              margin-left:0;
              margin-top:400px;
               transform:rotate(90deg);
        }
        100%
        {
            margin-left:0;
            margin-top:0;
            transform:rotate(180deg);
        }

    }
    div
    {
        width:400px;
        height:100px;
        background-color:fuchsia;
    }
    div:hover{
        -webkit-animation:yerdegistir 3s;

    }

//TRANSFORM:ROTATİON(180DEG)     derecesini söyllüyoruz okadar dönüyor