html - MSN网站css3过渡效果

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);
    }