Animacja w CSS- obracanie

Question

Macie pomysł czemu kwadrat się odwraca? 

<div class="background">
    <div class="heart circle one"></div>
    <div class="heart circle two"></div>
    <div class="heart squere three"></div>
</div>

@keyframes heartbeat {
    50%{
        transform: scale(1.5);
    }
}

.heart{
    background: firebrick;
    width: 100px;
    height: 100px;
    animation: heartbeat 5s infinite;
}

.background{
    margin: 50px;
}

.circle{
    border-radius: 50%;
}

.two{
    margin-top: -100px;
    margin-left: 72px;
}

.three{
    transform: rotate(45deg);
    margin-left: 37px;
    margin-top: -65px;
    width: 100px;
    height: 100px;

}

 

Answer 1

Klasy są na równym poziomie i animacja wywołuje obrót. Możesz to tak zapisać:

<div class="three squere" >
                <div class="heart"></div>
</div>

Comments

Dzięki

Answer 2

.three {
    transform: rotate(45deg);
    margin-left: 37px;
    margin-top: -65px;
    width: 100px;
    height: 100px;
}

Jeżeli usuniesz lub za komentujesz  transform: rotate(45deg); Przestanie się odwracać ...Pobaw się w Devtools chrome lub firefox'a.

Pozdrawiam

Comments

Ale wtedy przestaje był sercem