css3 effet de transition sur le site MSN

Question

Je viens de voir qu'ils ont une transition: http://t.uk.msn.com/?rd=1&ucc=GB&dcc=GB&opt=0

lorsque vous cliquez sur un élément, il repoussé un peu! (Fonctionne uniquement avec IE10)

Comment diable faites-vous cela? J'ai jeté un oeil au style en ligne mais je ne comprends pas le code?

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

J'ai trouvé que si j'ajoute:

 transform:rotateY(20deg); 

tourne assez bien, mais maintenant comment puis-je demander que lorsqu'un bas de la souris de l'utilisateur sur elle sans utiliser javascript?

Answer 1

Got it! Donc vous avez besoin de la transition là-bas mais aussi de la rotation. cela semble faire le travail plutôt bien!

<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

Vous devez également ajouter les éléments suivants à votre css:

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

Cela ajoute un petit tiret à l'effet.