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
Andrew Stelmach
12,583 PointsBetter PERFORMANCE by using transform: translate(); but is it better than using positioning properties overall?
The video says we get better performance by using transform: translate(); properties, but is it less fiddly and/or problematic than using positioning properties?
If I just want to change the position of an element, is it easier to use a transform or a position property?
7 Answers
David Hope
19,876 PointsOkay, here are just a few pieces of information which may be able to help answer your question. You might want to check the W3C for an even more in depth answer or by using your search engine of choice to find the answer you're looking for. I wish you the best of luck!
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/#position-property
http://alistapart.com/article/css-positioning-101
http://learn.shayhowe.com/advanced-html-css/transitions-animations/
David Hope
19,876 PointsThat depends on what your desired result is. If you want your element to have any sort of animation or movement on the screen, then using the transform: translate(); properties is your best bet. For elements which there will be no animation or movement, then using a position property is the better option. I hope this explanation helps you out Andrew!
Andrew Stelmach
12,583 PointsThanks, but why is it better?
David Hope
19,876 PointsNo problem, here's why: In regards to transform: translate() properties for animation or movement, it's because they trigger hardware acceleration on the users computer, as explained by Guil in this excellent blog post http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.
Andrew Stelmach
12,583 PointsThanks, but I was referring to the question of whether it's more or less 'fiddly' or problematic (in terms of coding, page layout, responsive design etc) than using positioning properties.
Andrew Stelmach
12,583 PointsTreehouse is asking me to select a 'best answer', but no-one has actually answered my question yet!?
Andrew Stelmach
12,583 PointsThanks, David. That helps a lot.