Я экспериментировал с jQuery animate и CSS3 animate, я также хотел протестировать 2D / 3D перевод, чтобы увидеть, что лучше.

Кто-нибудь знает, почему мой CSS3 translate3d не 'т работаешь? Я'Я попробовал это на настольном компьютере и мобильном телефоне.

Любая помощь приветствуется

jsFiddle

HTML

transition
    translate
    translate3d
    jQ animate

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