CSS3动画translate3d不工作 [英] CSS3 animation translate3d not working

问题描述

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

有没有人知道为什么我的CSS3 translate3d不工作？

jsFiddle

HTML

 < div id =container1class =container> transition< / div> 
< div id =container2class =container> translate< / div> 
< div id =container3class =container> translate3d< / div> 
< div id =container4class =container> jQ animate< / div> 
  

CSS

  .container {position：absolute; left：20px; width：80px; height：80px; padding：5px;} 
 
 / * transition * / 
＃container1 {top：20px;背景：红色; 
 -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} / *它移动如果从父的pos绝对，本例中的body标签* / 
 
 
 
 / * 2D translate * / 
＃container2 {top：120px;背景：黄色; 
 -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）;} / *如果从起点开始移动，在此示例中为20px * / 
 
 
 
 / * 3D  -  translate * / 
＃container3 {top：220px;背景：石灰; 
 -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）;} / *如果从起点开始移动，在此示例中剩余20px * / 
 
 
 
 / * 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'}）; 
}）
  
 
 
解决方案
缺少长度单位 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）; 
} / *如果从起点开始移动，在此示例中为20px * / 
  
这是小提琴 
 
I have been experimenting with jQuery animate vs CSS3 animate, I alse wanted to test the 2D / 3D translate to see which is better.

Does anyone know why my CSS3 translate3d doesn't work? I've tried it on desktop and mobile.

Any help appreciated

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

解决方案
You are missing the length unit px.

Use this in the 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 */
Here is a fiddle

                        
这篇关于CSS3动画translate3d不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！