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

Question

大家好，我是開發新手。 誰能告訴我如何在向右或向左拖動時旋轉其 Y 軸？

我不知道該怎么做。 請幫我。

我只希望每當我向右或向左拖動它時它應該滑動。 我希望你會明白這一點。

這是我的代碼

 /* @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>

這也是它的圖像，每當我向左或向右拖動時，我都想滑動它。

Answer 1

這不是一個真正的拖拽事件情況。 如果鼠標向下然后移動，則旋轉木馬將被旋轉。

要感知鼠標在輪播上移動（或觸摸移動），我們必須在其上設置事件偵聽器以感知鼠標何時按下（或 touchstart）、鼠標移動以及鼠標何時抬起（touchend）。

輪播變換設置為將其旋轉相等的度數。 在這個片段中，度數設置為移動量（以屏幕上的像素為單位）除以 10，只是為了抑制它，否則它會旋轉。

幻燈片已經給出了背景 colors 只是為了讓問題中的代碼不包括實際圖像更清楚發生了什么。

 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>