CSS Problem z scaleY

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ź

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

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 154 wizyt

Jaki mam tu błąd? Java script

pytanie zadane 10 czerwca 2019 w JavaScript przez fff Gaduła (3,950 p.)

0 głosów

1 odpowiedź 149 wizyt

Jak zrobić animację na przykład transform: scale(1,1) z scale(0,0)

pytanie zadane 19 czerwca 2018 w JavaScript przez DariuszH Gaduła (3,100 p.)

+1 głos

2 odpowiedzi 193 wizyt

CSS - inline transform

pytanie zadane 22 listopada 2021 w HTML i CSS przez Billy Użytkownik (680 p.)

CSS Problem z scaleY

Zaloguj lub zarejestruj się, aby skomentować.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci