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 Transitions and Transforms

Fat Dog
Fat Dog
18,848 Points
Posted by Fat Dog
Fat Dog
18,848 Points

What's wrong with the CSS code here?

I think I provide the transform-origin of the .star path's class. But once I submitted the work, it says that I didn't provide the .star element transform-origin. Still wondering why...

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Animating SVG with CSS</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="60 60 240 240">
    <g>
        <circle class="star-bg" fill="#40adcf" stroke="#fff" stroke-width="6" cx="180" cy="180" r="108.3"/>
        <path class="star" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/>
    </g>
     </svg>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */

.star {
  transition: transform .8s ease-out;
  transform-origin: center;
}

.star:hover {
  transform: rotate(180deg);  
}

.star-bg {
  transition-duration: 1s;
  transition-property: fill;
}

.star-bg:hover {
  fill: steelblue;
}

2 Answers

Tom Holland
Tom Holland
24,288 Points
Tom Holland
Tom Holland
24,288 Points

I don't believe that transform is a valid property value for transition:

It looks like you've told .star you want it to transition, but you haven't given it a valid property to apply a transition to.

Arturo Gutierrez
Arturo Gutierrez
11,414 Points
Arturo Gutierrez
Arturo Gutierrez
11,414 Points

Try putting 50% 50% for the transform origin. That should center it, though if it is being previewed in Mozilla then you would have to put the values that are in the circle element. It should be the properties "cx" and "cy" which in your code is "180 180"