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

这增加了一点效果。

MSN网站上的css3过渡效果

2 个答案: