Mohon bantuannya, apakah possible membuat element seperti ini?

CSS
#1

Selamat malam,
Mohon bantuannya :pray:
Saya sedang membuat app berbasis web, dan mengalami kendala.

Saya membuat bar navigasi dengan perspective transform pada bagian atas, kiri dan bawah.
Dan saya berniat tidak menggunakan navigasi bawah dan menggantinya dengan memanjangkan element nav kiri tetapi dengan membengkokkannya ke arah kanan.

Kurang lebih seperti ini (gif yg saya buat)
ezgif-2-09f008b610

Bagaimana caranya membengkokkan element nav kiri ke kanan seperti gambar saya diatas.
Sehingga ketika di scroll down konten yang di scroll pd overflow-y bergerak ke arah kanan.

(Bukan menggunakan 2 element yang di rotate, tapi 1 element saja (nav kiri)

Tolong pencerahannya :pray:
Sebelumnya terima kasih.

#2

Hi @tolepcoy ,

Untuk case seperti itu kamu butuh CSS + JS yaa

Anggaplah kita punya component seperti di bawah. Kita berharap agar kita bisa scroll ke kanan.

<div class="scroll-wrapper">
    <div class="item">Konten 1</div>
    <div class="item">Konten 2</div>
    <div class="item">Konten 3</div>
    <div class="item">Konten 4</div>
</div>

Kita tambahkan styling agar lebih keliatan

.scroll-wrapper{
    display: flex; // buat konten nya ke kanan
    overflow-x: scroll; // buat agar memunculkan scrollbar
}

.item {
    min-width: 150px;
    margin-right: 10px;
    background-color: lightgray;
    padding: 20px;
    text-align: center;
}

Begini kurang lebih tampilannya dengan kode di atas. Secara tampilan memang sudah sesuai, tapi ketika ingin di scroll harus dengan menggeser scrollbar nya kan ya, sedangkan yg kita inginkan adalah ketika scroll dengan mouse / touchpad, kontennya akan bergerak secara horizontal

image

Nah agar bisa tercapai sesuai yang kita inginkan, kita butuh kode javascript nih.

Gini kurang lebih yaa

<script>
    // JavaScript untuk menghubungkan scroll vertikal ke horizontal
    const scrollWrapper= document.querySelector(".scroll-wrapper");

    scrollWrapper.addEventListener("wheel", (event) => {
        event.preventDefault();

        // mengubah perilaku bawaan yaitu scroll ke bawah (y-axis) ke scroll ke samping (x-axis)
        scrollWrapper.scrollLeft += event.deltaY;
    });
</script>

Silahkan di coba sendiri yaa, kalau ada kendala kabari saja lagi.

Semoga membantu :+1:

1 Like
#3

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

#4

Tolong bang @Doltons_Edward pencerahannya kembali :pray:,
Kasus saya itu bukan pada scrollnya bang, melainkan “lipatan” atau membengkokkan div kiri ke arah kanan.

html:

<div class="kiri">
<div class="navkiri">Konten 1</div>
<div class="navkiri">Konten 2</div>
<div class="navkiri">Konten 3</div>
<div class="navkiri">Konten 4</div>
<div class="navkiri">Konten 5</div>
<div class="navkiri">Konten 6</div>
<div class="navkiri">Konten 7</div>
<div class="navkiri">Konten 8</div>
</div>

css:

.kiri {
position: fixed;
background: lightblue;
left: 0;
top: 0.05%;
width: 170px;
height: 200px;
overflow-X: hidden;
overflow-Y: scroll;
transform-origin: left !important;
transform: perspective(700px) rotateY(49deg) !important;
}

.kiri .navkiri {
font-size: 20px;
font-weight: 1000;
color: #000;
letter-spacing: 2px;
line-height: 25px;
padding: 10px 0 10px 13px;
}

Saya ingin div di element kiri ini “di lipat” atau di bengkokkan ke kanan seperti ini.

Screenshot_20241112-190939_QuickEdit+jciufjydiydoyd
Screenshot_20241112-190939_QuickEdit+jciufjydiydoyd725Ă—500 16.5 KB

Jadi ketika di scroll konten yg ada di dalam div kiri ini bergerak 3d ke arah kanan, bukan ke arah bawah.
Terima kasih bang :pray:.