页面切换动画效果5 - 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) 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);
}

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