css3 以当前图片为中心点页面翻转效果

css 代码如下

.switching {
    -webkit-transform:perspective(2000px) rotateY(-90deg);
    -webkit-animation:flip .4s linear,flip_out .4s .41s linear;
    transform:perspective(2000px) rotateY(-90deg);
    animation:flip .4s linear,flip_out .4s .41s linear
}

@-webkit-keyframes flip {
    0% {
    -webkit-transform:perspective(2000px) rotateY(0deg)
}
100% {
    -webkit-transform:perspective(2000px) rotateY(90deg)
}
}
@-webkit-keyframes flip_out {
    0% {
    -webkit-transform:perspective(2000px) rotateY(-90deg)
}
100% {
    -webkit-transform:perspective(2000px) rotateY(0deg)
}
}
@keyframes flip {
    0% {
    transform:perspective(2000px) rotateY(0deg)
}
100% {
    transform:perspective(2000px) rotateY(90deg)
}
}
@keyframes flip_out {
    0% {
    transform:perspective(2000px) rotateY(-90deg)
}
100% {
    transform:perspective(2000px) rotateY(0deg)
}

html代码

<div class="donghua">
	<div class="展示片段1">
					
	</div>
	<div class="展示片段2">
				
        </div>
</div>

js代码

//点击旋转
function dong(){
  $('.donghua').removeClass('switching');
  $('1').css('display','block');
  $('2').css('display','none');
}
function dong1(){
  $('.donghua').removeClass('switching');
  $('2').css('display','block');
  $('1').css('display','none');
}
$('要触发的事件').click(function() {
  $('.donghua').addClass('switching');
  window.setTimeout(function(){dong()},800);
});
$('要触发的事件').click(function() {
  $('.donghua').addClass('switching');
  window.setTimeout(function(){dong1()},800);			
})