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

question-closed CSS Problem z scaleY

Aruba Cloud - Virtual Private Server VPS
0 głosów
249 wizyt
pytanie zadane 8 sierpnia 2020 w HTML i CSS przez Marak123 Stary wyjadacz (11,190 p.)
zamknięte 8 sierpnia 2020 przez Marak123

Mam element w którym są inne elementy(napisy) a chcę ten element rozsunąć po naciśnięciu na przycisk używam do tego scaleY i element się rozsuwa ale razem z tym napisy rozciągają się w pionie nie wiem jak zrobić tak aby ten element jeden się tylko rozsuną a napisy się nie zmieniły to jest ten kod:

 <nav class="navigation-menu-top">
            <section>
                  <p>napis</p>
            </section>
            <section>
                  <p>napis</p>
            </section>
            <section>
                  <p>napis</p>
            </section>
            <section>
                  <p>napis</p>
            </section>
            <section>
                  <p>napis</p>
            </section>
            <section>
                  <p>napis</p>
            </section>
      </nav>

rozsuwam ten element "navigation-menu-top"

i teraz niech ktoś mi powie jak robić to tak aby element navigation-menu-top się rozsuną w pionie a napisy zostały takie jakie są i nic się nie wydłużały?

to jest zdj tego napisu

komentarz zamknięcia: dzięki za odpowiedź
1
komentarz 8 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Może zamiast scaleY zwiększ elementowi height?

komentarz 8 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)
Robiłem tak i działa tylko chcę od razu zoptymalizować tą stronę żeby jej nie ścinało bo robiłem sobie testową stronę i właśnie robiłem animacje jakieś właśnie za pomocą top, left, height, width itp. i ta strona miała z jakieś 20fps i tutaj jest dokładnie tak samo jak animuje się ten kontener to strona nie ma 60fps tylko spada do 20-30fps

1 odpowiedź

+1 głos
odpowiedź 8 sierpnia 2020 przez DawidK Nałogowiec (37,910 p.)
wybrane 8 sierpnia 2020 przez Marak123
 
Najlepsza

Możesz zmienić height (w przykładzie niżej po najechaniu). W przypadku kliknięcia złap element np przez querySelector i dodaj eventlistenera na klik, który doda lub obejmnie klase zwiększającą wysokość ( classlist.toggle )

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>nawigacja</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
    <style>
            * {
                box-sizing: border-box;
                margin:0;
                padding:0;
            }
            
            section {
                background-color: black;
                border: 1px solid white;
                color: white;
                height: 5vw;
                position: relative;
                transition: 0.4s;
                width: 10vw;
            }

            section p {
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            section:hover {
                height: 7vw;
            }

    </style>
<body>
    <nav>
        <section>
              <p>napis 1</p>
        </section>
        <section>
              <p>napis 2</p>
        </section>
        <section>
              <p>napis 3</p>
        </section>
        <section>
              <p>napis 4</p>
        </section>
        <section>
              <p>napis 5</p>
        </section>
        <section>
              <p>napis 6</p>
        </section>
  </nav>
</body>
</html>

 

komentarz 8 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)
o tym przed chwilą napisałem w komentarzu że nie chcę używać właściwości height
komentarz 8 sierpnia 2020 przez DawidK Nałogowiec (37,910 p.)

Moim zdaniem dziwne jest zwiększanie wysokości bez używania wysokości.

Jak chcesz uniknąć rozciągania liter to możesz je też zeskalować: powiedzmy zwiększasz "przycisk w menu" 2x (200%) i jednocześnie zmniejszasz tekst w przycisku o 1/2 (50%). Rozwali Ci to jednak menu - przyciski nie będą się przesuwać tylko się zasłaniać.

            * {
                box-sizing: border-box;
                margin:0;
                padding:0;
            }

            section {
                background-color: black;
                border: 1px solid white;
                color: white;
                height: 5vw;
                position: relative;
                transition: 0.4s;
                transform: scale(1);
                width: 10vw;
            }

            section p {
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            section:hover {
                transform: scaleY(2);
            }

            section:hover p {
                transform: translate(-50%, -100%) scaleY(0.5);
            }

 

komentarz 8 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)
no właśnie nie działa coś takiego bo robiłem tak ale rozciąga się jeszcze bardziej
1
komentarz 8 sierpnia 2020 przez DawidK Nałogowiec (37,910 p.)

Jeżeli rozciągneło Ci się jeszcze bardziej to, prawdopodobnie masz inne wartości:

dla 2 dla przycisku powinno być 1/2 dla napisu

dla 3 dla przycisku powinno być 1/3 dla napisu

itd.

do tego trzeba będzie też zmienić transform: translate (wartość Y) w tym fragmencie, bo prawy górny róg napisu będzie wypadał gdzie indziej.

section:hover p {
               transform: translate(-50%, ...)scaleY(33.33%);
            }

Generalnie same problemy.

komentarz 8 sierpnia 2020 przez Marak123 Stary wyjadacz (11,190 p.)
zrobiłem to trochę inaczej bo zrobiłem to za pomocą aftera tego elementu wysuwa się i nie ma wpływu na napisy dzięki za pomoc

Podobne pytania

–2 głosów
2 odpowiedzi 194 wizyt
pytanie zadane 10 czerwca 2019 w JavaScript przez fff Gaduła (3,950 p.)
0 głosów
1 odpowiedź 210 wizyt
+1 głos
2 odpowiedzi 287 wizyt
pytanie zadane 22 listopada 2021 w HTML i CSS przez Billy Użytkownik (680 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 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!

...