CSS3实现手机网页3D切换效果

<div id="phone">
<div id="screen" >
<!-- 第一个页面 -->
<div class="viewport first">
<header>
<img src="images/logo.png" style='width:50px;height:50px;'>
<span id="next">下一页</span>
</header>
<div class="content">
<div class="box image">
<img src="images/1.jpg">
</div>
<div class="box text">
新学期，赶紧恢复状态！好好复习好以前学过的东西，测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<div class="box command">
测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
</div>
</div>
<!-- 第二个页面 -->
<div class="viewport last">
<header>
<img src="images/logo.png" style='width:50px;height:50px;'>
<span id="pre">上一页</span>
</header>
<div class="content">
<div class="box image">
<img src="images/1.jpg">
</div>
<div class="box text">
测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<div class="box command">
测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
</div>
</div>
</div>
</div>

*{margin:0;padding:0;}
html,body{
width:100%;height:100%;
background: #f1f1f1;
font-size: 14px;
font-family: 'Microsoft Yahei';
}
/*制作手机外壳*/
#phone{
width:320px;
background: #2c3e50;border-radius:30px;
/*盒模型居中定位*/
position:absolute;
right:0;left:0;
top:10px;
margin:auto;
padding:70px 18px 0;
}
/*听筒*/
#phone:before{
content:"";
display: block;/*很重要*/
height:8px;width:45px;
background:#1f2b38;
margin:-30px auto 30px;
border-radius:20px;
}
/*按钮*/
#phone:after{
content:"";
display: block;/*很重要*/
height:45px;width:45px;
background:#1f2b38;
margin:12px auto;
border-radius:50%;
}
/*屏幕*/
#phone #screen{
background:#d6e6e9;height:480px;
position:relative;
/*3d元素视觉*/
perspective:800px;
overflow: hidden;

}
.viewport{
width:100%;height:100%;
position:absolute;
-webkit-transition:all 0.4s;
transition:all 0.4s;
/*border: 1px solid red;*/
}
.first{
z-index:2;
left:0;
/*3d元素旋转的定位点*/
transform-origin:0% 0%;
transform:rotateY(0deg);
/*display:none;*/

}
/*下移隐藏第二屏*/
.last{z-index:1;top:480px;}
.last .image{left:320px;}
.last .text{left:-320px;}
.last .command{bottom:-150px;}
/*点击之后的样式*/
.animation .first{transform:rotateY(110deg);}

.animation .last{top:0;z-index:3;}

.animation .last .image{left:0px;-webkit-transition-delay:0.2s;}
.animation .last .text{left:0px;-webkit-transition-delay:0.3s;}
.animation .last .command{bottom:0px;-webkit-transition-delay:0.4s;}

.viewport header{
width:100%;color:#fff;background: #55b5c9;
padding:0 15px;
-webkit-box-sizing:border-box;
}
.viewport header span{
float:right;
background: #ddebee;
color:#55b5c9;
padding:7px;
cursor:pointer;
margin-top:13px;
}
.content{
width:100%;
padding:15px;
-webkit-box-sizing:border-box;
}
.content .box{
margin:0 0 15px;
width:100%;
background:#fff;
padding:10px;
-webkit-box-sizing:border-box;
-webkit-transition:all 0.4s;
transition:all 0.4s;
position: relative;
}
.content .image img{
width:265px;
}

$(function(){
$("#next").click(function(){
$('#screen').removeClass('animation2').addClass('animation');
});
$("#pre").click(function(){
$('#screen').removeClass('animation').addClass('animation2');
});
})