时间戳

首页 > 解决方案 > Y轴旋转卡片

javascript - Y轴旋转卡片

问题描述

我有三张卡，我想实现 Y 轴旋转。它可以工作，但是当您更改旋转时会出现问题。例如，如果您向上旋转它可以工作，但是当您单击向下时，旋转首先向上，然后向下旋转。我坚持这一点，我的代码中有错误的逻辑，但我无法解决它。

<!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/index.js"></script>
</body>
</html>

var cards = $('#carousel > .card'), Next, Previous, revert,  sorted, res
    nexttransforms = [

        {y: '-55%', z: '-50px', scale: 0.8,},
        {y: '55%', z: '-50px', scale: 0.8,},
        {y: 0, z: 0, scale: 1,},
    ];
 revert = Object.keys(nexttransforms).map(function(a){
   return ({[a]:nexttransforms[a]});
});
sorted = revert.sort((a,b) => Object.keys(b)- Object.keys(a))

res = sorted.map(a=> Object.values(a)[0]) // for array

Next = function () {
    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+')',
          });
    }
        nexttransforms.push(nexttransforms.shift());
};
Previous = function (){
    for (i = 0; i < cards.length; i++) {
        var kartica = cards[i];
        $(kartica).css({
            'transform': 'translateY('+ res[i].y +') translateZ(' + res[i].z + ') scale(' + res[i].scale+')',
        });
    }
    res.push(res.shift());
};
$('#down').on('click', function(){
    Previous();
});
$('#up').on('click', function(){
    Next();
});

#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;
}

我想平稳地向上和向下旋转它

标签： javascriptjqueryarrayscarousel

解决方案

你需要知道从哪里开始，当你点击下一个和上一个时，你不需要重新排序项目。

所以我确保只nexttransforms作为一个项目列表，然后在您单击next和时根据需要重新定位它们prev

看评论就明白了

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 () {
     // start from the right position
     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 (){
       // start from the right position
       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+')',
        });
    }
    
};
var first = false;
$('#down').on('click', function(){

    Previous();

});
$('#up').on('click', function(){
    Next();
});
#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;
}
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

<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/index.js"></script>

推荐阅读