Ex caixa c/ transição p/2

Oi voltando com a continuação de caixa c/ efeito hover...
Como na imagem acima mostra usamos a mesma caixa ,mas efeito é outro...
Veja a demonstração online:ENTRE AQUI:
Agora abaixo fica código :

<style>
#excaixabt{
width:250px;
height:120px;
margin:auto;
border:3px solid #fff;
border-radius:10px  ;
-moz-border-radius:10px;
-webkit-border-radius:10px  ;
background:#fff url(https://s-media-cache-ak0.pinimg.com/236x/54/e1/49/54e1495ff9b8dfc4909cc12af4dbbc04.jpg);
box-shadow:0px 0px 20px 0px #000;
-moz-box-shadow:0px 0px 20px 0px #000;
-webkit-box-shadow:0px 0px 20px 0px #000;
 transition:width 3s, height 3s, transform 3s, background-color 3s;
-webkit-transition:width 3s, height 3s,color 3s, -webkit-transform 3s, background-color 3s;
   
}
#excaixabt:hover{
 transform:rotate(1800deg);
-webkit-transform:rotate(1800deg); /* Prefix for Safari */
}
</style>
<div id="excaixabt">
</div>

Nota,aqui abaixo explico cada detalhe deste gadget .

• width:250px largura caixa
• height:120px; altura caixa
• margin:auto; caixa centrada
• border:3px solid #fff; borda  expessura e côr
• border-radius:10px  moz webkit: angulo borda caixa  
• background:#fff url(); côr e imagem fundo caixa
• box-shadow:px #000 moz webkit; côr espessura de fora caixa
• transition transition hover; efeito na imagem caixa

E pronto espero que ajude alguma questão deixe recado ,terá continuação em outras postagens...

Ex caixa c/ transição p/2

► 0

► box dicas efeitos vários

► Cartita