• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animacja w CSS- obracanie

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
506 wizyt
pytanie zadane 16 marca 2021 w HTML i CSS przez Trekeren Początkujący (370 p.)

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;

}

 

2 odpowiedzi

+1 głos
odpowiedź 16 marca 2021 przez Adrian3000 Nowicjusz (200 p.)
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>
komentarz 16 marca 2021 przez Trekeren Początkujący (370 p.)
Dzięki
0 głosów
odpowiedź 16 marca 2021 przez niezalogowany

.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 wink

komentarz 16 marca 2021 przez Trekeren Początkujący (370 p.)
Ale wtedy przestaje był sercem

Podobne pytania

+1 głos
2 odpowiedzi 186 wizyt
pytanie zadane 25 grudnia 2020 w HTML i CSS przez AgentTecza Obywatel (1,810 p.)
0 głosów
3 odpowiedzi 1,331 wizyt
pytanie zadane 5 grudnia 2019 w HTML i CSS przez eMe Początkujący (340 p.)
0 głosów
0 odpowiedzi 392 wizyt
pytanie zadane 11 lutego 2019 w HTML i CSS przez Anetka Początkujący (260 p.)

93,110 zapytań

142,088 odpowiedzi

321,612 komentarzy

62,451 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...