jquery结合css3动画特效属性如： keyframes、 transform等打造3D盒子翻转特效，懒得写注释了。。。唯一的注释就是以下代码只是草稿，嗯，草稿中的草稿~但是能用！
<style type=”text/css”>
.wrapper {
display: inline-block;
width: 310px;
height: 100px;
vertical-align: top;
margin: 1em 1.5em 2em 0;
cursor: pointer;
position: relative;
font-family: Tahoma, Arial;
-webkit-perspective: 4000px;
-moz-perspective: 4000px;
-ms-perspective: 4000px;
-o-perspective: 4000px;
perspective: 4000px;
}
.item {
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.item .information {
display: block;
position: absolute;
top: 0;
height: 80px;
width: 290px;
text-align: left;
padding: 10px;
font-size: 12px;
background: rgb(100,100,100);
}
.item .page1 {
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
}
.item .page2 {
-webkit-transform: rotateX(-90deg) translateZ(50px);
-moz-transform: rotateX(-90deg) translateZ(50px);
-ms-transform: rotateX(-90deg) translateZ(50px);
-o-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);
}
.content {
display: none
}
.fanzhuan {
-webkit-animation: fanzhuan 1s forwards;
}
@-webkit-keyframes fanzhuan {
from {
transform:rotateX(0deg);
}
to {
transform: rotateX(90deg);
}
}
</style>
<script type=”text/javascript” src=”http://wcj.zhaicool.net/wp-content/themes/Enews/js/jquery-1.8.3.min.js”></script>
<body>
<div class=”wrapper”>
<div class=”item”> <span class=”information page1″></span><span class=”information page2″></span> </div>
</div>
<div class=”content content1″>第一页</div>
<div class=”content content2″>第二页</div>
<div class=”content content3″>第三页</div>
<div class=”content content4″>第四页</div>
<div class=”content content5″>第五页</div>
<div onClick=”fanye();”>翻页</div>
</body>
<script>
$(document).ready(function() {
$(“.page1”).html($(“.content1”).html());
});
var hits = 0;
var flag = 0;
function fanye() {
if (hits > 3) {
hits = 0;
flag++;
} else {
hits++;
}
if (flag == 0 && hits == 1) {
$(“.page1”).html($(“.content1”).html());
} else {
$(“.page1”).html($(“.page2”).html());
}
$(“.page2”).html($(“.content” + (hits + 1)).html());
$(“.item”).removeClass(“fanzhuan”);
setInterval(function() {
$(“.item”).addClass(“fanzhuan”);
},
100);
}
</script>
未经允许不得转载：前端撸码笔记 » css3动画结合jquery打造盒子翻动效果