brynn Posted May 8, 2015 Share Posted May 8, 2015 Hi Friends, I almost posted this in the Suggestions board, but likely this is a problem on my end, somehow. Although I'm sure you can move this, if it is some kind of problem. For the CSS3 2D Transforms and 3D Transforms tutorials, the "Try it yourself" examples don't work. I'm using Firefox all current and up to date (atm 37.0.2). And the Browser Support section says it should be supported. All the other "TIYs" work as expected. Is it something I'm missing? I guess I'm getting a little ahead of myself, maybe trying to learn too much too soon. So potentially I could have missed something, along the way, that would explain this. Or is there a problem in those examples? Thanks for enlightening me Link to comment Share on other sites More sharing options...
dsonesuk Posted May 8, 2015 Share Posted May 8, 2015 Try it with prefix -moz- for mozilla firefox, it has -wekit- for chrome, -ms- for microsoft but not for firefox. Link to comment Share on other sites More sharing options...
brynn Posted May 8, 2015 Author Share Posted May 8, 2015 Is this what you mean? I tried like this, but didn't work. <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; -moz-transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari */ transform: translate(50px,100px); /* Standard syntax */}</style> Link to comment Share on other sites More sharing options...
dsonesuk Posted May 8, 2015 Share Posted May 8, 2015 (edited) It does work, without -moz-, it positioned like you are adding top left margin from its position without margin, there is no animation or anything to show it is/has moved.NOTE:I am using same version Firefox version Edited May 8, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
brynn Posted May 8, 2015 Author Share Posted May 8, 2015 (edited) I'm not sure I understand. Are you saying that those examples are not supposed to show the animation? If not, I would ask, why not? Edited May 8, 2015 by brynn Link to comment Share on other sites More sharing options...
dsonesuk Posted May 8, 2015 Share Posted May 8, 2015 No what i am saying the example code you provided just moves the box down and right, there is no animation involved with that example. Link to comment Share on other sites More sharing options...
brynn Posted May 11, 2015 Author Share Posted May 11, 2015 Please excuse my newbie-ness. But what use is that kind of code then? Why not just put the box where you want it in the first place, rather than put it in one place, and then write code for it to be in another place. I must be missing some major concept. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 11, 2015 Share Posted May 11, 2015 Is what I thought when using to move element to new position why?, but! when used to animate with keyframes, and depending on complexity and number of animations going at same time it give much better effect without CPU overhead as explain greatly here http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ Link to comment Share on other sites More sharing options...
brynn Posted May 11, 2015 Author Share Posted May 11, 2015 (edited) Hhmm.....well a lot of the info in that article is still over my head, at the moment. But I'll forge ahead and hopefully it will become clear. Thank you very much for taking the time to help me to understand (Edit -- I can't remember if this forum likes topics to be marked solved. But I can't find the button, if there is. Anyway, we can close this topic now. TA) Edited May 11, 2015 by brynn Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now