页面切换动画效果4 - 3D切换

    <article id="tablet">
    <img src="images/05.jpg" alt="tablet">
    <h1>Comprehensam</h1>
    <p>Tablets, tablets... one for you.</p>
    <a href="#wifi">Next</a>
      </article>
      <article id="wifi">
    <img src="images/06.jpg" alt="">
    <h1>Adversarium</h1>
    <p>Our Tablet Buying Guide ... after all.</p>
    <a href="#tablet">Next</a>
      </article>

    html,body {height: 100%;}
     body {
       margin: 0;
       padding: 0;
       text-align: center;
       color: #fff;
       overflow: hidden;
       position: relative;
    
       -webkit-perspective: 1500px;
       perspective: 1500px;
     }
     article {
       position: absolute;
       top: 0;
    
       width: 100%;
       height: 100%;
       padding: 100px;
       box-sizing: border-box;
    
       -webkit-transition: all 1s ease-in-out;
       transition: all 1s ease-in-out;
    
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
     }
     #tablet {
       background-color: #4ac4aa;
    
       -webkit-transform: rotateY(0deg);
       transform: rotateY(0deg);;
     }
     #wifi {
       background-color: #ea5634;
    
       -webkit-transform: rotateY(180deg);/* 或者写成 -180deg */
       transform: rotateY(180deg);/* 或者写成 -180deg */
     }
     h1 {
       font-size: 4em;
       border-bottom: 1px solid rgba(255, 255, 255, .2);
       padding-bottom: 30px;
     }
     p {
       color: rgba(255, 255, 255, .8);
       margin-bottom: 30px;
     }
     a {
       font-size: 1.5em;
       padding: 5px 50px;
       border: 1px solid #fff;
       border-radius: 4px;
       text-decoration: none;
       color: #fff;
     }
    
     #tablet.move {
       -webkit-transform: rotateY(180deg);
       transform: rotateY(180deg);
     }
     #wifi.move {
       -webkit-transform: rotateY(0deg);
       transform: rotateY(0deg);
     }

    <script>
      $(document).ready(function() {
    $('a').click(function(e) {
      e.preventDefault();
      $('#tablet').toggleClass('move');
      $('#wifi').toggleClass('move');
    });
      });
    </script>