CSS3动画translate3d无法正常工作

Question

我一直在试验jQuery动画与CSS3动画，我还想测试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