javascript - 如何在刷卡时旋转和缩放卡片

Question

当我试图制作一个旋转的旋转木马时，我想知道如何移动旋转的卡片，当用户不断刷卡时，它从最小 0.8(左右卡片)和最大 1(中心卡片)缩放

Scale: 
left = 0.8 
center = 1 
right = 0.8

我正在尝试解决如何使用 transform 和 z-index 属性来旋转它们。卡片也会旋转，但是我仍在尝试制定一个关于如何制作使卡片旋转的函数的公式
接受任何替代解决方案动画是
类似于 codepen 的这个轮播，但它不会滑动 Carousel Rotate

const CONTAINER_FLEX = document.querySelector('.container-flex');
const items = document.querySelectorAll('.item');

let touchStartX = 0;
let touchMoveX = 0;
let count = 0;

let current_translate = 0;
let previous_translate = 0;

CONTAINER_FLEX.addEventListener('touchstart', (event) => {
  touchStartX = event.touches[0].pageX;
});

CONTAINER_FLEX.addEventListener('touchmove', (event) => {
  touchMoveX = event.touches[0].pageX;

  current_translate = previous_translate + (touchMoveX - touchStartX);

  console.log(current_translate);

  items[1].style.transform = `translateX(${current_translate}px)`;
});

CONTAINER_FLEX.addEventListener('touchend', () => {
  current_translate = touchMoveX - touchStartX;
  previous_translate = current_translate;
});

*,
 ::before,
 ::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  background-color: #131b24;
}

.main-container {
  padding: 30px 0;
  height: 300px;
  width: 900px;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  overflow: hidden;
  background-color: white;
}

.container-flex {
  height: 100%;
  display: flex;
  transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.item {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 300px;
  max-width: 300px;
}

.item h1 {
  font-size: 40px;
  color: white;
}


/* ITEMS */

.item-1 {
  background-color: #2c3e50;
  transform: translateX(100px);
  z-index: 1;
}

.item-2 {
  background-color: #3498db;
  z-index: 2;
}

.item-3 {
  background-color: #1abc9c;
  transform: translateX(-100px);
  z-index: 1;
}

<div class="main-container">
  <div class="container-flex" id="container-flex">
    <div class="item item-1">
      <h1>1</h1>
    </div>
    <div class="item item-2">
      <h1>2</h1>
    </div>
    <div class="item item-3">
      <h1>3</h1>
    </div>
  </div>
</div>

这是一个工作示例 https://jsfiddle.net/4ue5sgm9/3/

Answer 1

I wonder how to move the cards when it goes from 0 to 200 however

把你所有的卡片放在一个数组中。

var cards = [ thing1, thing2, thing3];

使用% - 模数运算符，这是循环回到起点的 secret

      cardIndex = (cardIndex + 1) % cards.length

复制自 the chat .为了清楚起见，我把它写得很详细

scrollLeft() {
 nextIndex = items.indexOf(displayed[2])
 
 nextIndex = ++nextIndex % items.length-1
 displayed = items[nextIndex]
 
 nextIndex = ++nextIndex % items.length-1;
 displayed.push( items[nextIndex] );
 
 nextIndex = ++nextIndex % items.length-1;
 displayed.push( items[nextIndex] )
}

附: 元素数组的写入和迭代器。迭代器在最后一项之后停止。迭代器是“for (x in thisArray)”工作的原因。但是编写 next() 函数来返回 "% this.length-1"=> 现在你有一个永无止境的循环器。上面的所有代码都消失了。