Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>KOCKE</title>
</head>
<body>
    <html>
<head>
    <!DOCTYPE html>
    <head>
         <meta charset="utf-8">
         <title> Lopta koja skace </title>
         <style>
            #kocke {
              position:relative;
              width:530px;
              height:530px;
              margin:0 auto 10px;
              border:1px black solid;
              padding:10px;
              background: #00f
            }
            .kutija {
              font-size:12px;
              position:relative;
              width:60px;
              height:60px;
              margin-bottom:10px;
              background-color:transparent;
            }
            .kutija p {
              text-align:center;
              padding-top:4px;
            }
            #ease.kutija {
              -webkit-transition: all 4s ease; border:1px #f00 solid;
                 }
            #ease-in.kutija {
              -webkit-transition: all 4s ease-in; border:1px #0f0 solid;
            }
              #ease-out.kutija {
              -webkit-transition: all 4s ease-out; border:1px #00f solid;
            }
            #ease-in-out.kutija {
              -webkit-transition: all 4s ease-in-out; border:1px #ff0 solid;
               }
            #linear.kutija {
              -webkit-transition: all 4s linear; border:1px #f0f solid;
                }
            #custom.kutija {
              -webkit-transition: all 4s cubic-bezier(1.0, -0.5, 0.5, 1);border:1px #0ff solid;

            }
            #kocke:hover .kutija, #kocke.hover_effect .kutija {
              border-radius:30px;
              -webkit-transform: rotate(720deg); margin-left:420px;
               background-color:#fff;
            }
          </style>
    </head>
    <body>
        <div id="kocke" class="efekat hover">
            <div id="ease" class="kutija"><p>Ease</p></div>
            <div id="ease-in" class="kutija"><p>Ease<br>In</p></div>
            <div id="ease-out" class="kutija"><p>Ease<br>Out</p></div>
            <div id="linear" class="kutija"><p>Linear</p></div>
            <div id="ease-in-out" class="kutija"><p>Ease<br>In Out</p></div>
            <div id="custom" class="kutija"><p>1.0,-0.5<br>0.5, 1</p></div>

          </div>
        </div>
    </body>
    </html>