Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Keyframe and Line Drawing Animations The Animation Challenge Solution

cristian lemus
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
cristian lemus
Full Stack JavaScript Techdegree Graduate 25,790 Points
Posted by cristian lemus
.a{fill-rule:evenodd;}techdegree seal-36
cristian lemus
Full Stack JavaScript Techdegree Graduate 25,790 Points

Why not use translateY intead of translate3D if we are only changing the Y value?

In tutorial Guil used translate 3d(eg. translate3d(0,-10,0), and only set the Y value. Why couldn't he just use translateY? I tried to replace the code with translateY and it didn't work. But I would like to know why its not working, and when to use either of the two.

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Just from performance considerations, translate3d is preferable because it takes advantage of available hardware acceleration.

And while MDN says these are functionally equivalent, I've seen other cases where the 3d transform resolved issues that were occuring using the individual transform(s). So I'm just guessing, but it could be that its implementation overcomes some bugs in certain browsers.