Efeito Rotate

Hey people tudo bem? ヾ(*ΦωΦ)ﾉ Cara eu posso contar um segredo? UAHSuahsuahsuahs bem nem é tão segredo assim mas querem saber o motivo de eu estar tão ausente no blog? Então, repararam que dei uma mudada no blog de imagens e fiz umas melhorias né? Pois é, o meu segredo é que fiquei tão viciada em editar imagens que acho que de uns dias para cá que deixei aqui meio largado eu cheguei a editar um total de 500 imagens (✦థ ｪ థ) uhum isso mesmo. E não sei se chegaram a ver mas eu postava de 15 em 15 minutos no grupo os posts de imagens AUHSUAHSuahsuahs. Sei lá peguei gosto pela coisa e adoro ficar testando efeitos, principalmente os psds que deixam as cores mais em evidência *--* Confesso que ainda não tenho muita manha e ainda estou treinando pois nunca fui muito boa nisso. Mas enfim, esse era o motivo mesmo de eu estar meio sumida daqui, prometo dar uma pausa =)

Então queridos, como eu vi que nenhuma alma viva se quer pediu nada na minha ask eu resolvi criar um efeito bem simples e que existem milhares na net parecidos, mas que tem um diferencial, o efeito hover. Perceberam que estão usando bastante o efeito outline com as bordas costuradas né? Então, aproveitando a onda do momento eu fiz o efeito com esses traços, o post anterior foi com um menu com esses efeitos também e vi que a maioria gostou e aprovou ^^ É isso então amores, espero que curtem o efeito e qualquer coisa peçam por favor na ask certo? Beijinhos doces e até a próxima postagem ok?  kissus kissus（〜^∇^)〜

LIVE PREVIEW ★彡

Vá até o modelo e procure por: ]]skin; e acima dele cole o código seguinte:

.rotate {background:#fff; padding:3px; border: solid 1px #FFD8D8;
outline: 1px dotted #FFD5D5;outline-offset: -5px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.rotate:hover {background:#fff; padding:3px; border: solid 1px #FFB3B3;
outline: 1px dashed #FFB3B3;outline-offset: -5px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform:rotate(360deg);
} 

Links: 

<a href="https://www.blogger.com/LINK" target="blank" title="NOME"><img class="rotate" src="IMAGEM" />