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);
})