时间戳

首页 > 解决方案 > 如何使用 Javascript 旋转这张卡片？

javascript - 如何使用 Javascript 旋转这张卡片？

问题描述

大家好，我是开发新手。谁能告诉我如何在向右或向左拖动时旋转其 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>

这也是它的图像，每当我向左或向右拖动时，我都想滑动它。

这是图像

标签： javascripthtmljquerycss

解决方案

这不是一个真正的拖拽事件情况。如果鼠标向下然后移动，则旋转木马将被旋转。

要感知鼠标在轮播上的移动（或触摸移动），我们必须在其上设置事件侦听器以感知鼠标何时按下（或 touchstart）、鼠标移动以及鼠标何时抬起（touchend）。

轮播变换设置为将其旋转相等的度数。在这个片段中，度数设置为移动量（以屏幕上的像素为单位）除以 10，只是为了抑制它，否则它会旋转。

幻灯片已被赋予背景颜色，只是为了让问题中的代码更明显，因为问题中的代码不包括实际图像。

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>

推荐阅读