Question

我在这个示例中有一个简单的卡片翻转动画：https://desandro.github.io/3dtransforms/docs/card-flip.html

我想把这个（或类似的东西）变成一个幻灯片技巧，我不会只是前后翻转，而是多个元素，以及来回按钮。

如果不异步加载下一个或上一个元素，这怎么可能？

请参阅示例HTML元素：

FirstClass first = new FirstClass();
Field[] fields = first.getClass().getFields();

SecondClass second = new SecondClass();
Field[] fields1 = second.getClass().getFields();

Answer 1

我是通过使用3个独立的CSS类来完成的：

turnsLeft（向左转，Y轴为-180度）

turnsRight（向右转，Y轴为180度）

有效（面向用户，Y轴为0度）

和2个功能：

prevSlide：将turnsRight添加到活动幻灯片，并使前一个元素处于活动状态。

nextSlide：将turnsLeft添加到活动幻灯片，并使下一个元素处于活动状态。

这是动态的，适用于“card”div中的任意数量的元素！

https://jsfiddle.net/gmsitter/vuob9bnx/

HTML：

  <section class="container">
    <div id="card">
      <figure class="active">1</figure>
      <figure>2</figure>
      <figure>3</figure>
      <figure>4</figure>
      <figure>5</figure>
    </div>
  </section>

<button id="previous">Previous</button>
<button id="next">Next</button>

CSS：

    figure {
      margin: 0px;
      font-family: sans-serif;
    }

    .container {
      width: 200px;
      height: 260px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #card {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    #card figure {
      display: block;
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
      background: blue;
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #card .turnedLeft {
      -webkit-transform: rotateY( -180deg );
         -moz-transform: rotateY( -180deg );
           -o-transform: rotateY( -180deg );
              transform: rotateY( -180deg );
    }

    #card .turnedRight {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

    #card .active {
      -webkit-transform: rotateY( 0deg );
         -moz-transform: rotateY( 0deg );
           -o-transform: rotateY( 0deg );
              transform: rotateY( 0deg );
    }

JS：

var init = function() {
    var r = 1; 
  var slides = $("#card").children();

  $('#next').click(function(){
    nextSlide();   
  });

  $('#previous').click(function(){
    prevSlide();   
  });  

  function nextSlide(){
    if(r<slides.length){
      var activeSlide = $(".active");
      activeSlide.addClass("turnedLeft");
      activeSlide.removeClass("active");
      activeSlide.next().addClass("active");
      r++
    }    
  }

  function prevSlide(){
    if(r>1){
      var activeSlide = $(".active");
      activeSlide.addClass("turnedRight");
      activeSlide.removeClass("active");
      activeSlide.prev().addClass("active");
      r--
    }   
  }

};

window.addEventListener('DOMContentLoaded', init, false);

将CSS 3d Flip转换为幻灯片

1 个答案: