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 CSS Transitions and Transforms Getting Started with CSS Transforms Combining Transforms

Using second transform in the same rule doesn't override it.

In the video Combining Transforms in the CSS Transitions and Transforms course, it says that if you use a second transform in the same rule it overrides the first. I find that this is true if the second transform is written directly under the first. However in the video an example second transform for the same rule is placed at the end of the interactions.css file and it still overrides the first transform. In the video when I try the same thing, not only is the first transform not overridden but the last transform is not applied. Why is this happening? The code segments looks like this. Sorry, the workspaces files for this video and a few others are not being listed. Don't know why. I'm using Firefox as my browser.

This code segment works the way the video says it should.

img:hover { transform: rotate(-5deg) scale(1.1) translateY(-20px); transform: skew(50deg); }

At end of the css file. Has no effect on the behavior of the images.

img:hover { transform: skew(50deg); }

Thanks for your help John

Steven Parker
Steven Parker
231,269 Points

FYI: to share a workspace, make a snapshot and post the link to it.

1 Answer

Steven Parker
Steven Parker
231,269 Points

Did you leave that second transform in the first rule? If so, there's no difference between the first rule and the second one, so the "override" would not be noticeable.

In the video, the second transform was removed before the other rule was created.