Question

我一直在尝试使用jQuery animate和CSS3 animate，我也想测试2D / 3D翻译以查看哪个更好。

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

任何帮助表示赞赏

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

CSS3动画translate3d不起作用

1 个答案: