css3 transition effect on MSN website

Question

I just saw that they have a transition on: http://t.uk.msn.com/?rd=1&ucc=GB&dcc=GB&opt=0

when you click on an element, it pushed back a bit! (Only works in IE10)

How on earth do you do that? I have taken a look at the inline style but I don't understand the code?

        transition-property: transform; 
        transition-duration: 0.22s; 
        transition-timing-function: ease; 
        transition-delay: 0s; 
        transform-origin: right 50%;

I've found that if I add:

        transform:rotateY(20deg);

it rotates it pretty well but now how do I apply that when a user mouse downs on it without using javascript?

Answer 1

Got it! So you need the transition stuff there but also that rotate thing. that seems to do the job pretty well!

    <element>:active
    {
        transition-property: transform; 
        transition-duration: 0.22s; 
        transition-timing-function: ease; 
        transition-delay: 0s; 
        transform-origin: left 50%;
        transform:rotateY(30deg);
    }

Answer 2

You should also add on the following to your css:

background-visibility: visible;
transition-origin: 0% 50%;
transform: perspective(50px) rotateY(2deg);

This adds a little indent to the effect.