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 Transitions and Transforms Transform Origin in Firefox

Tarik Hamilton
Tarik Hamilton
6,799 Points
Posted by Tarik Hamilton
Tarik Hamilton
6,799 Points

I'm guessing using pixels for transform-origin makes it not responsive?

The Firefox solution is basically not responsive?

3 Answers

Tarik Hamilton
Tarik Hamilton
6,799 Points
Tarik Hamilton
Tarik Hamilton
6,799 Points

Hi Walter. I understand that, but the Firefox solution used fixed lengths, rather than relative ones. I'm just wondering, what is Treehouse's suggestion on using transform-origin across browsers.

johan leandisco
johan leandisco
1,178 Points

I was thinking about that too, there should be another way to do it. PD: Firefox always complicating my work.

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

Guil answered a similar question here and said that it should scale properly in any size viewport. I tried resizing the browser, as well as testing on an iPhone in Chrome dev tools, and it all looks the same. I'm new to SVGs, but I would guess it has to do with how SVGs handle the cx and cy attributes.

Walter Perez
Walter Perez
11,383 Points
Walter Perez
Walter Perez
11,383 Points

Hello Tarik, let's see if I can help you.

Css has 2 types of lengths, relatives, and absolutes.

Relatives, are relatives to other length. (em, rem, %).

Absolutes, are fixed lengths.(px,cm,pt). Then whatever u use with.. won't be responsive.

Regards

Abhijeet Ramgir
Abhijeet Ramgir
110 Points

So is there a way to make it responsive? Thanks

armand Rodriguez
armand Rodriguez
7,830 Points
armand Rodriguez
armand Rodriguez
7,830 Points

I'm just curious if there is a remedy for this, since this was the question that kept coming to mind while watching this video. Wouldn't it be better to just use percentages since it works with the majority of browsers?