jquery - CSS3 动画 Translate3d 不工作

Question

我一直在尝试 jQuery animate 与 CSS3 animate，我还想测试 2D/3D 翻译，看看哪个更好。

有谁知道为什么我的 CSS3 translate3d 不起作用？我已经在桌面和移动设备上尝试过。

感谢任何帮助

jsFiddle

HTML

<div id="container1" class="container">transition</div>
    <div id="container2" class="container">translate</div>
    <div id="container3" class="container">translate3d</div>
    <div id="container4" class="container">jQ animate</div>

CSS

    .container          {position:absolute; left:20px; width:80px; height:80px; padding:5px;}

/* transition */
#container1         {top:20px; background:red;
                    -webkit-transition:all 0.3s linear;
                    -moz-transition:all 0.3s linear;
                    -o-transition:all 0.3s linear;
                    -ms-transition:all 0.3s linear;
                    transition:all 0.3s linear;}

#container1.on      {left:250px} /* It moves if from pos absolute of parent, the body tag in this example */



/* 2D translate */
#container2         {top:120px; background:yellow;
                    -webkit-transition:all 0.3s linear;
                    -moz-transition:all 0.3s linear;
                    -o-transition:all 0.3s linear;
                    -ms-transition:all 0.3s linear;
                    transition:all 0.3s linear;}

#container2.on      {-webkit-transform: translate(230px);
                    -moz-transform: translate(230px);
                    -o-transform: translate(230px);
                    -ms-transform: translate(230px);
                    transform: translate(230px);}  /* It moves if from the starting point, 20px left in this example */



/* 3D - translate */
#container3         {top:220px; background:lime;
                    -webkit-transition:all 0.3s linear;
                    -moz-transition:all 0.3s linear;
                    -o-transition:all 0.3s linear;
                    -ms-transition:all 0.3s linear;
                    transition:all 0.3s linear;}

#container3.on      {-webkit-transform: translate3d(230,0,0);
                    -moz-transform: translate3d(230,0,0);
                    -o-transform: translate3d(230,0,0);
                    -ms-transform: translate3d(230,0,0);
                    transform: translate3d(230,0,0);}  /* It moves if from the starting point, 20px left in this example */



/* jQuery Animate */
#container4         {top:320px; background:orange;}

jQuery

    $('#container1').click(function()
    {
        $(this).toggleClass('on');
    })

    $('#container2').click(function()
    {
        $(this).toggleClass('on');
    })

    $('#container3').click(function()
    {
        $(this).toggleClass('on');
    })

    $('#container4').toggle(function()
    {
        $(this).animate({'left':'250px'});

    }, function()
    {
        $(this).animate({'left':'20px'});
    })

Answer 1

您缺少长度单位px。

在 CSS 中使用它:

#container3.on {
    -webkit-transform: translate3d(230px, 0, 0);
    -moz-transform: translate3d(230px, 0, 0);
    -o-transform: translate3d(230px, 0, 0);
    -ms-transform: translate3d(230px, 0, 0);
    transform: translate3d(230px, 0, 0);
}  /* It moves if from the starting point, 20px left in this example */

这是一个fiddle