The transform property for the heart class should use a rotate() function set to -45 degrees

Tell us what’s happening:
The transform property for the heart class should use a rotate() function set to -45 degrees.

Is there something wrong with my transform syntax? Help!

Your code so far


<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45);
}
.heart::after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
  content: "" ;
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class="heart"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36.

Challenge: Create a More Complex Shape Using CSS and HTML

Link to the challenge:

2 Likes

Hi!

You missed to define it as degrees.

`

transform: rotate(-45deg);

`

Great! Thanks so much!

1 Like

it has to be rotate(-45deg); it must have “deg” inside

1 Like