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 - Beyond the Basics Understanding CSS Transitions and Transforms Transforms Challenge

Hannah Pierce
Hannah Pierce
5,448 Points

Moving Badge Counterclockwise Using Flex

Give the .badge element a transform that rotates it 15 degrees counterclockwise and moves it down 50px.

I'm not sure what I'm doing wrong! It says to check my rotation value but I thought this was right...obviously not! Any help would be appreciated.

/* Complete the challenge by writing CSS below */
.badge { -webkit-transform: rotate (15deg) scale (50) }
<!DOCTYPE html>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  <img class="badge" src="css-badge.png">

2 Answers

So it's asking for counterclockwise, right now your 15deg moves it clockwise, so what would be the opposite of that? What value would cause it to move in the opposite direction?

As for the second part, you are using scale which will not move it along an X or Y axis. Think about what it's asking, it wants you to move it 50px down, so we know they are referring to the Y axis since Y is vertical and X is horizontal. So what transform property would move something along the Y axis? I'll give you a hint, look at translateX and translateY :)

Also, you need a certain punctuation mark between your two transforms.

Oliver Simon
Oliver Simon
10,192 Points
.badge {
  transform: rotate(-15deg) translateY(50px);