如何使用 Javascript 旋转此卡的 Y？

Question

Hello everyone I am a newbie in development. Can anyone tell me how to rotate its Y-axis on dragging right or left?

I don't know how to do that. Please help me.

I just want whenever I drag it right or left it should slide. I hope you will understand this.

Here is my code

 /* @import url(https://fonts.googleapis.com/css?family=Hind+Siliguri:300,600|Martel:400,900); */ @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); * { margin: 0px; padding: 0px; /* font-family:"Hind Siliguri",Helvetica,Arial,sans-serif; */ font-family: 'Nanum Gothic', sans-serif; font-weight: normal; box-sizing: border-box; } header { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; background: linear-gradient(to left, #56c1ea, #212529); /* background-size: 400%; */ /* opacity: 0.8; */ /* background-color:black; */ }.container { overflow: hidden; height: 50vh; width: 50%; left: 50%; top: 50%; position: absolute; opacity: 0.7; transform: translate(-50%, -50%); /* background-color: blue; */ }.container>img { position: absolute; width: 100%; height: 50vh; }.ctn { position: absolute; width: 100%; bottom: 20%; left: 0; display: grid; place-items: center; }.loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid #56c1ea; /* Blue */ border-radius: 50%; width: 35px; height: 35px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.box { position: absolute; bottom: 10%; left: 0; width: 100%; display: grid; place-items: center; height: 80px; /* background-color: blueviolet; */ overflow: hidden; z-index: 1; }.box>h1 { display: inline-flex; place-items: center; color: white; position: absolute; left: 10%; }.box>h1>span { font-size: 70px; color: white; }.imgg { position: absolute; left: 0; top: 0; height: 100vh; width: auto; z-index: 1; transform: rotate(90deg); }.searcher { position: absolute; left: 2%; top: 0; height: 50vh; width: auto; /* background-color: blue; */ overflow: hidden; display: grid; place-items: center; z-index: 1; }.searcher.sbox { /* background-color: yellow; */ height: 80px; width: auto; display: grid; place-items: center; padding: 5px 25px; }.sbox input { border: none; color: black; background-color: white; border-radius: 100px; padding: 5px 20px; width: 400px; height: 40px; }.sbox h1 { color: white; font-size: 25px; }.sbox.search { position: relative; overflow: hidden; cursor: pointer; }.sbox span { display: grid; place-items: center; position: absolute; right: 0; top: 0; height: 100%; width: 20%; color: #56c1ea; }.car { position: absolute; right: 10%; bottom: 0; background-color: black; overflow: hidden; height: 50vh; width: 50%; display: flex; align-items: center; justify-content: center; min-height: 100vh; }.cara { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; /* animation: animate 20s linear infinite; */ transform: perspective(1000px) rotateY(0deg); } @keyframes animate { 0% { transform: perspective(1000px) rotateY(0deg); } 100% { transform: perspective(1000px) rotateY(360deg); } }.cara span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center; transform-style: preserve-3d; transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px); }.cara span img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; /* cursor:pointer; */ transition: 0.7s; }.cara span img:hover { transform: scale(1.5); }

 <div class="car"> <div class="cara"> <span class="slide" style="--i:1;"><img src="../assets/images/1 (1).jpg" alt=""></span> <span class="slide" style="--i:2;"><img src="../assets/images/1 (2).jpg" alt=""></span> <span class="slide" style="--i:3;"><img src="../assets/images/1 (3).jpg" alt=""></span> <span class="slide" style="--i:4;"><img src="../assets/images/1 (4).jpg" alt=""></span> <span class="slide" style="--i:5;"><img src="../assets/images/1 (5).jpg" alt=""></span> <span class="slide" style="--i:6;"><img src="../assets/images/1 (6).jpg" alt=""></span> <span class="slide" style="--i:7;"><img src="../assets/images/default.png" alt=""></span> <span class="slide" style="--i:8;"><img src="../assets/images/joker-official-movie-poster-1567011412.jpg" alt=""></span> </div> </div>

And also here is its image I want to slide it whenever I drag it left or right.

Answer 1

This isn't really a dragging event situation. The carousel is to be rotated if the mouse is down and then moved.

To sense a mouse moving across the carousel (or a touch moving) we have to set up event listeners on it to sense when the mouse is down (or touchstart), the mouse is moved and the mouse is up (touchend).

The carousel transform is set to rotate it an equivalent number of degrees. In this snippet the number of degrees is set as the amount moved (in pixels across the screen) divided by 10 just to dampen it down otherwise it shoots round.

Slides have been given background colors just to make it more obvious what is going on as the code in the question did not include the actual images.

 const car = document.querySelector('.car'); const cara = document.querySelector('.cara'); let started = false; //set true when mouse goes down let degrees = 0; //the number of degrees cara is currently rotated let lastX; //The event listeners function start(e) { lastX = e.pageX; started = true; } function move(e) { e.preventDefault(); e.stopPropagation(); if (started) { let newX = e.pageX; degrees += (newX - lastX) / 10;//10 is just to dampen down the movement cara.style.transform = 'perspective(1000px) rotateY(' + degrees + 'deg)'; lastX = newX; } } function stop(e) { started = false; } car.addEventListener('mousedown', e => { start(e); }); car.addEventListener('mousemove', e => { move(e); }); car.addEventListener('mouseup', e => { stop(e); }); car.addEventListener('touchstart', e => { start(e); }); car.addEventListener('touchmove', e => { move(e); }); car.addEventListener('touchend', e => { stop(e); });

 /* @import url(https://fonts.googleapis.com/css?family=Hind+Siliguri:300,600|Martel:400,900); */ @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); * { margin: 0px; padding: 0px; /* font-family:"Hind Siliguri",Helvetica,Arial,sans-serif; */ font-family: 'Nanum Gothic', sans-serif; font-weight: normal; box-sizing: border-box; } header { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; background: linear-gradient(to left, #56c1ea, #212529); /* background-size: 400%; */ /* opacity: 0.8; */ /* background-color:black; */ }.container { overflow: hidden; height: 50vh; width: 50%; left: 50%; top: 50%; position: absolute; opacity: 0.7; transform: translate(-50%, -50%); /* background-color: blue; */ }.container>img { position: absolute; width: 100%; height: 50vh; }.ctn { position: absolute; width: 100%; bottom: 20%; left: 0; display: grid; place-items: center; }.loader { border: 5px solid #f3f3f3; /* Light grey */ border-top: 5px solid #56c1ea; /* Blue */ border-radius: 50%; width: 35px; height: 35px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.box { position: absolute; bottom: 10%; left: 0; width: 100%; display: grid; place-items: center; height: 80px; /* background-color: blueviolet; */ overflow: hidden; z-index: 1; }.box>h1 { display: inline-flex; place-items: center; color: white; position: absolute; left: 10%; }.box>h1>span { font-size: 70px; color: white; }.imgg { position: absolute; left: 0; top: 0; height: 100vh; width: auto; z-index: 1; transform: rotate(90deg); }.searcher { position: absolute; left: 2%; top: 0; height: 50vh; width: auto; /* background-color: blue; */ overflow: hidden; display: grid; place-items: center; z-index: 1; }.searcher.sbox { /* background-color: yellow; */ height: 80px; width: auto; display: grid; place-items: center; padding: 5px 25px; }.sbox input { border: none; color: black; background-color: white; border-radius: 100px; padding: 5px 20px; width: 400px; height: 40px; }.sbox h1 { color: white; font-size: 25px; }.sbox.search { position: relative; overflow: hidden; cursor: pointer; }.sbox span { display: grid; place-items: center; position: absolute; right: 0; top: 0; height: 100%; width: 20%; color: #56c1ea; }.car { position: absolute; right: 10%; bottom: 0; background-color: black; overflow: hidden; height: 50vh; width: 50%; display: flex; align-items: center; justify-content: center; min-height: 100vh; }.cara { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; /*animation: animate 20s linear infinite; */ transform: perspective(1000px) rotateY(0deg); } @keyframes animate { 0% { transform: perspective(1000px) rotateY(0deg); } 100% { transform: perspective(1000px) rotateY(360deg); } }.cara span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center; transform-style: preserve-3d; transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px); }.cara span img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; /* cursor:pointer; */ transition: 0.7s; }.cara span img:hover { transform: scale(1.5); }

 <div class="car"> <div class="cara"> <span class="slide" style="--i:1; background:blue;"><img src="../assets/images/1 (1).jpg" alt=""></span> <span class="slide" style="--i:2; background:red;"><img src="../assets/images/1 (2).jpg" alt=""></span> <span class="slide" style="--i:3; background:green;"><img src="../assets/images/1 (3).jpg" alt=""></span> <span class="slide" style="--i:4; background:magenta;"><img src="../assets/images/1 (4).jpg" alt=""></span> <span class="slide" style="--i:5; background:cyan;"><img src="../assets/images/1 (5).jpg" alt=""></span> <span class="slide" style="--i:6; background:yellow;"><img src="../assets/images/1 (6).jpg" alt=""></span> <span class="slide" style="--i:7; background:purple;"><img src="../assets/images/default.png" alt=""></span> <span class="slide" style="--i:8; background:pink;"><img src="../assets/images/joker-official-movie-poster-1567011412.jpg" alt=""></span> </div> </div>