Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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
220,378 Points

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

1 Answer

Steven Parker
Steven Parker
220,378 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.