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

Answer 2

您还应该在 CSS 中添加以下内容：

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

这为效果增加了一点缩进。