使用css3转换制作透视标题

Question

我需要一个小滑块演示文稿

我希望我可以将this plain version（view fullscreen）的报告标题改为：

也很高兴：

1. 也在css动画中移动图标而不是使用jQuery
2. 在
中的图标步骤后动画3d动画
3. 有更多.slide元素按顺序出现

不需要跨浏览器的麻烦，一切都将以chrome，最新版本运行。

---

修改

我看到我可以轻松处理使用jQuery添加类的转换但是，因为在不同元素上按顺序添加似乎并不容易，所以我必须设置匹配转换持续时间的超时：

$().ready(function(){
    $('.icon').addClass('in');
    setTimeout(function(){
        $('h1').addClass('on');
    }, 1000);
    setTimeout(function(){
        $('.icon').addClass('out');
    }, 2000);    
});

See JSFiddle

有更好的解决方案吗？

Answer 1

解决方案是将-webkit-perspective和-webkit-perspective-origin应用于标题容器：

-webkit-perspective: 150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */

请参阅live demo

Answer 2

如果你不想使用setTimeout，你可以将每个动画分解为一个单独的函数，并通过这样的回调将它们串在一起：

$().ready(function(){
    animationOne();
});

function animationOne()
{
     $('.icon').transition( { 'margin-top': 0 }, 2000, 'in', animationTwo ); 
}

function animationTwo() 
{
    $('h1').transition( { 'font-size': '5em', perspective: 200, rotateY: -15 }, 1000, 'in-out', animationThree );
}

function animationThree()
{
     $('.icon').transition( { 'margin-left': '-600px' }, 2000, 'in-out'); 
}  

JS Fiddle Demo

基本上，动画完成后，会调用下一个函数，允许您连续动画。我在上面的示例中使用jQuery Transit，如果您想要进行大量转换/转换而不必处理大型css文件，这是完美的。

Answer 3

您可以使用CSS3的变换沿z轴旋转：

-webkit-transform: rotateY(120deg);

当然这些属性是可动画的（我不知道这是否是一个单词）与CSS3过渡：

-webkit-transition-property: -webkit-transfom;

（我只使用-webkit-，因为您在问题中说它只会在Chrome中运行。）

如果您也将其他属性添加到过渡属性，则可以使用$("#whatever").css()为其设置动画。