当我尝试制作一个旋转的轮播时,我想知道如何移动旋转的卡片,并且当用户不断滑动时,它的缩放比例从最小 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)