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

Hannah Pierce
Hannah Pierce
5,448 Points
Posted by 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.

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

2 Answers

mikes02
mikes02
Courses Plus Student 16,968 Points

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
Oliver Simon
Oliver Simon
10,192 Points 
.badge {
  transform: rotate(-15deg) translateY(50px);
}