Question

我有3张卡片，我想实现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;
}

我想上下平滑旋转

Answer 1

单击下一步和上一页时，您需要知道从何处开始，因此您无需重新排序项目。

因此，我确保仅将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>

卡片沿Y轴旋转

1 个答案: