hover transiciones y giro

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

</head>
<body>


<h3>Transiciones</h3>
    <div id="mascara">
    <div id="contenedor">

        <div id="arriba"><p>Derecha Abajo</p></div>
        <div id="der"><p>Izquierda Abajo</p></div>
        <div id="izq"><p>Derecha Arriba</p></div>
        <div id="abajo"><p>Izquierda Arriba</p></div>
    </div>
</div>



</body>
</html>

CSS

#mascara{
    position:relative;
    width:204px;
    height:204px;
    -webkit-border-radius:5px;
    border: 2px solid #666;
    margin:auto;
    padding:5px;
    background-color:#333;
    z-index:5;
    
}

#contenedor{
position:relative;
width: 200px;
height:200px;
border: 1px solid #C30;
margin:auto;
-webkit-transition:-webkit-transform 3s;
}
#contenedor:hover{
    -webkit-transform:rotate(360deg);
    }
#superior, #inferior{
    position:relative;
    width:200px;
    height:100px;
    text-align:center;
    }

p{
    margin:auto;
    width:50px;
}

#izq, #der, #arriba, #abajo
{
    width: 100px;
    height:100px;
    font-size:14px;
    color:#FFF;
    font-weight: bold;
    transition-property:width 2s, height 2s, linear 2s;
    /* Safari and Chrome */
    -webkit-transition: width 0.5s, height 0.5s, linear 1s;    
}

    
#izq
{
    position:absolute;
    left:0px;
    bottom:0px;
    background-color:red;    
}

#der
{
    position:absolute;
    right:0;
    top:0;
    background-color:blue;    
}


#arriba
{
    position:absolute;
    left: 0px;
    top: 0px;    
    background-color:#F63;
}

#abajo
{
    position:absolute;
    right:0px;
    bottom:0px;
    background-color:#939;
}

#izq:hover, #der:hover, #arriba:hover, #abajo:hover
{
    height:200px;
    width:200px;
    z-index:2;
}