Exemplo de CSS 3 com Transitions e Transforms

On 03.22.11, In Descompressão, Desenvolvimento, by

Vi uma animação em flash sobre o lançamento do IE9 e achei interessante compartilhar uma pequena idéia que tive e fiz com CSS 3. Abaixo do exemplo tem o código para se divertirem. O site em referência é o Vida de Programador e a animação de fato era em gif animada. Passem o mouse em cima do logo.

Quem quiser, vai aí o código utilizado no exemplo:

CSS:

        #rotateLogo {
            position: relative;
            margin: 20px auto;
            width: 319px;
            height: 310px;
        }
 
        #ie9logo {
            position: absolute;
            top: 0;
            left: 0;
        }
 
        #nine {
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: 72px;
            font-family: arial, sans-serif;
            -webkit-transition: all 2s ease-in-out;
            -moz-transition: all 2s ease-in-out;
            color: #7095C9;        }
 
        #rotateLogo:hover #nine {
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            color:#ccc;
        }

HTML:

<div id="rotateLogo">
    <img src="http://leobalter.net/wp-content/uploads/2011/03/internet-explorer-9.jpg" alt="Logo de Internet Explorer 9" id="ie9logo" />
    <div id="nine">9</div>
</div>