CSS3 эффект перехода на веб-сайте MSN

Question

Я только что видел, что у них есть переход на: http://t.uk.msn.com/?rd=1&ucc=GB&dcc=GB&opt=0

при нажатии на элемент, он отодвинул немного! (Работает только в IE10)

Как вы это делаете? Я взглянул на встроенный стиль, но я не понимаю код?

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

Я обнаружил, что, если я добавлю:

 transform:rotateY(20deg); 

он поворачивает его довольно хорошо, но теперь, как я могу подать заявление, что, когда пользователь мыши спады на нем без использования JavaScript?

Answer 1

Получил это! Таким образом, вам нужен переходный материал, но также и то, что нужно вращать. что, похоже, делает работу очень хорошо!

<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

Вы должны также добавить на следующие строки в CSS:

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

Это добавляет немного отступа эффекта.