Why trasnform: rotate is added twice? Does the 2nd transform cancel the first?

HTML-CSS
1

Tell us what’s happening:
hi
In the lesson heart beat. I noticed thrice the attribute rotate with value -45 degree was used. One is in the in the .heart class and the other two are in the"keyframes beat". When i removed rotate in the keyframes i noticed the heart turns.

Why we need to add again the -45deg rotate in keyframes when its already mentioned in the class .heart. why the attribute transform: rotate() is not enough in the the class .heart?

Your code so far


<style>
.back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation-name: backdiv;
  animation-duration: 1s;
  animation-iteration-count: infinite;

}

.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg);
  animation-name: beat;
  animation-duration: 1s;
  animation-iteration-count: infinite;

}
.heart:after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart:before {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}

@keyframes backdiv {
  50% {
    background: #ffe6f2;
  }
}

@keyframes beat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  50% {
    transform: scale(0.6) rotate(-45deg);
  }
}

</style>
<div class="back"></div>
<div class="heart"></div>

Your browser information:

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

Challenge: Make a CSS Heartbeat using an Infinite Animation Count

Link to the challenge:

2

Hey @Hisoka,

The transform is used twice, because the scale property is scaling the original image which is not rotated. So if you did not use the transform twice, it will go to it’s original rotation, but scaled down.

3

hi :slightly_smiling_face:

Maybe i misunderstand you.

The thing is the scale property is scaling the original image which is rotated. The class heart has a transform: rotate(-45deg); . Therefore this is considered as the original image.
But transform is used again in the keyframes with this property transform: scale(1) rotate(-45deg);

i am curious why rotate it again to -45deg in keyframes? when the original image is already rotated to -45deg in class heart. When i removed the -45deg in the keyframes for some reason the -45deg in the class heart is ignored.

I am thinking the reason is that when transform is used in the the keyframes it cancels the transform property in the class heart. Because there can not be two transform commands. thats what i am thinking but not sure if thats really the reason.

4

I know what you’re trying to say, but the Source image, which is the image you linked it to is not rotated and that’s what the scale property is using to scale it.

5

The transform functions are composed, you have to include all functions or you will not end up with the correct final value.

transform: Values

<transform-function>

One or more of the CSS transform functions to be applied. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

6

@lasjorg @Catalactics
i edited my question. seems it was not asking exactly what i wanted to know. you can check it out. I was wondering from the start that you are talking about a different topic.

7

I re-read your post and I’m pretty sure I answered your question.

You will lose the rotation if you do not apply it again when setting the scale (both function return values have to be composed into a “complete” transform value).

8

Sorry. But i dont think your answers are answering the question.

Please explain your sentence “both function return values have to be composed into a “complete” transform value”

9

Not sure how much better I can explain it.

You give one value to transform. If that value is both a rotation and a scale they both need to be calculated and set to the property at the same time. The transform property is not some magical variable that can remember the old value when setting a new value and somehow automatically combines the old and new values.

So if you want an element to start out rotated and then scale up on hover you have to reapply the rotation when scaling otherwise the rotation will be lost. The final value that is given to transform must be a combination of both values, the rotation, and the scale.

10

Thanks all. i got the solution on the other post. Link is below

Solution

11

Please don’t make duplicate posts.

1 Like
12

sure. ill try. thanks :grimacing: :grimacing: :grimacing: