Вращение карт по оси Y - PullRequest
Новая
       5

Вращение карт по оси Y

0 голосов
/ 09 февраля 2019

У меня три карты, и я хочу добиться поворота по оси 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;
}

Я хочу плавно повернуть его вверх и вниз

1 Ответ

0 голосов
/ 09 февраля 2019

Вам нужно знать, с чего начать, когда вы нажимаете «Далее» и «Пред.переместите их по мере необходимости, когда вы нажмете 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...