Problem with transform: scale()

#1

Hi there, I revisited the ‘Create a More Complex Shape Using CSS and HTML’ challenge and decided to experiment with the ‘hover:’ state of the .heart element to increase its’ size when the cursor hovers over it. However, it does not behave as expected: it increases in size, but also rotates clockwise by 45deg! Can anyone tell me why this is happening please? My code is below:

<style>

.heart {

position: absolute;

margin: auto;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: pink;

height: 50px;

width: 50px;

transform: rotate(-45deg);

}

.heart:hover {

transform: scale(1.5);

background-color: red !important;

}

.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>
#2

I think it is because in the .heart class you are already rotating it 45 degrees anti-clockwise, and when you hover it is no longer applying the rotate, making it rotate 45 degrees clockwise back to it’s original position.

Try adding the rotate(-45deg) to your hover psuedo class

#3

Thanks for the idea, however when I put rotate(-45deg) into .heart::after and .heart::before it still rotates. If I put that into .heart:hover it no longer rotates or scales!! Ugh!!

#4

.heart::before and .heart::after are elements you are creating in CSS that are connected to .heart, but they are still different elements. If you apply rotate to them it will just rotate them. So what @camelcamper said is the reason it’s rotating, you’re removing the 45deg rotation on hover

#5

Dont worry about the :before & :after

In your .heart class you are rotating -45deg

However when you hover and the :hover css gets applied, it no longer gets the rotate -45deg from the .heart class, so you need to apply the rotation in your :hover class also.

I feel like I explained it better in my previous comment however you can also have a look at this codepen and compare it with yours

#6

Thanks again for putting the time in to look at this and to reply @camelcamper that does indeed cure the problem of rotation on hover, however, the transform: scale(1.5); doesn’t work when you add the transform: rotate(-45deg).

But hooray! I just thought; try putting the rotate(-45deg) into the existing transform like thus:

transform: scale(1.5) rotate(-45deg);

That did the trick and my heart now pumps up by 1.5 when I hover!!!1 Yeah!

Thanks again, it was driving me nuts!

2 Likes
#7

Nice work, you got it working.

To go one step further you can add a duration to your transform so it moves smoothly.

Try transition-duration: 5s;
inside your .heart class.

That is a pretty slow duration, over 5 seconds so you might want to change it.

https://www.w3schools.com/cssref/css3_pr_transition-duration.asp

https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

#8

Yeah! that’s pretty cool, duration of 1s works about best. I get a funny little twitch to the left though when the side scroll-bar appears in the right hand side of the window. I’ll have to figure that one out next! I’m guessing it’s something to do with the container expanding as the heart grows, perhaps I need to specify a fixed size container? Only does it on Chrome browser though, Firefox is fine with it!

Here’s the link to my pen if you want to take a look. https://codepen.io/Fishbite/pen/ReMvKK

Thanks for the links you sent. very useful :slight_smile:

Speak soon

#9