页面切换动画效果5 - 3D+缩放同时进行

在线演示

在切换过程中会发生同时翻转和缩放的效果。如图：

html:

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

css：

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) scale(1,1);
  transform: rotateY(0deg) scale(1,1);
}
#wifi {
  background-color: #ea5634;

  -webkit-transform: rotateY(180deg) scale(0,0);
  transform: rotateY(180deg) scale(0,0);
}
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) scale(0,0);
  transform: rotateY(180deg) scale(0,0);
}
#wifi.move {
  -webkit-transform: rotateY(0deg) scale(1,1);
  transform: rotateY(0deg) scale(1,1);
}

js：

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

解析：
为页面元素添加过多的transform渲染效果，尤其是3D效果，将会严重消耗手机等移动端的性能，因此在移动端应谨慎使用以上效果。