小编Vin*_*nce的帖子

如何在滑动时旋转和缩放卡片

当我尝试制作一个旋转的轮播时,我想知道如何移动旋转的卡片,并且当用户不断滑动时,它的缩放比例从最小 0.8(左卡和右卡)到最大比例 1(中心卡)

Scale: 
left = 0.8 
center = 1 
right = 0.8
Run Code Online (Sandbox Code Playgroud)

我正在尝试解决如何使用变换和 z-index 属性来旋转它们。卡片也会旋转,但是我仍在尝试制定一个公式来说明如何创建使卡片旋转的函数

接受任何替代解决方案该动画与 codepen 中的轮播类似,但它不会滑动轮播旋转

Scale: 
left = 0.8 
center = 1 
right = 0.8
Run Code Online (Sandbox Code Playgroud)
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); …
Run Code Online (Sandbox Code Playgroud)

html javascript css

7
推荐指数
1
解决办法
732
查看次数

标签 统计

css ×1

html ×1

javascript ×1