CSS3动画translate3d不起作用

我一直在尝试使用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'}); }) 

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 */ 

这是一个小提琴