У меня есть карусель из трех карт, вращающихся по оси Y, и она работает.Когда вы нажимаете кнопку «вверх», она поднимается, а когда вы нажимаете кнопку «вниз», она опускается, но я хочу добиться такой функциональности, как эта.Когда вы нажимаете верхнюю карту, она поднимается, а когда вы нажимаете нижнюю карту, она опускается.Я могу выбрать первый div и он работает, но когда вы нажимаете на первый элемент, он становится вторым и так далее, и это проблема.Как вызвать вращение только на элементе сверху и снизу?
var cards = $("#carousel > .card"), Next, Previous,
nexttransforms =[
{y: '-55%', z: '-50px', scale: 0.8,},
{y: '55%', z: '-50px', scale: 0.8,},
{y: 0, z: 0, scale: 1,},
];
Next = function(){
nexttransforms.push(nexttransforms.shift());
for(i=0; i<cards.length; i++){
var kartica = cards[i];
$(kartica).css({
'transform': 'translateY('+ nexttransforms[i].y +') translateZ(' + nexttransforms[i].z + ') scale(' + nexttransforms[i].scale+')',
});
}
};
Previous = function(){
for(i=0; i<=cards.length-2; i++){
nexttransforms.push(nexttransforms.shift());
}
for(i=0; i<cards.length; i++){
var x = nexttransforms[i];
var kartica = cards[i];
$(kartica).css({'transform': 'translateY('+ x.y +') translateZ(' + x.z + ') scale(' + x.scale+')',
});
}
};
$('#down').on('click', function(){
Previous();
});
$('#up').on('click', function(){
Next();
});
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div id="carousel">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</div>
<button id="up">Up</button>
<button id="down">Down</button>
<script src="js/fix.js"></script>
</body>
</html>
#carousel {
position: absolute;
top: 40px;
left: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 1;
}
.card {
position: absolute;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: 1s;
background: black;
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
}
.card:nth-child(3) {
-webkit-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0);
background: #add8e6;
}
.card:nth-child(1) {
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
background: #ff7f50;
}
.card:nth-child(2) {
-webkit-transform: translateY(55%) translateZ(-50px) scale(0.8);
transform: translateY(55%) translateZ(-50px) scale(0.8);
background: #7fff00;
}
Таким образом, конечный результат будет, когда вы нажимаете на верхнюю карту, она поднимается икогда вы нажимаете на нижнюю карту, она падает, и это должно работать бесконечно.