如何兼容IE浏览器
IE10是支持css 3D特效的，只不过属性设置与谷歌和火狐有区别，我这里的代码在谷歌是正常的，但是在IE下能看到第6张始终出现在最下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D旋转动画</title>
<style>
body,div{margin: 0; padding: 0;}
.transition-box{
width: 600px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.page-box{
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.page{
position: absolute;
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 50px;
font-weight: bold;
background-color: #000;
color: #fff;
-webkit-transform-origin: bottom;
-webkit-transition: -webkit-transform 1s linear;
transform-origin: bottom;
transition: transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.change-page{ width: 300px; margin: 10px auto 0; text-align: center; font-size: 14px;}
.change-page span{ margin: 0 5px; cursor: pointer;}
</style>
<script>
window.onload = function(){
var prevButton = document.getElementById("prev"),
nextButton = document.getElementById("next"),
pageIndex = 1; //初始化页面计数
prevButton.onclick = function(){
if(pageIndex == 1){
return false;
}
var curPage = document.getElementById("page" + pageIndex);
curPage.style.webkitTransform = "rotateX(90deg)";
curPage.style.transform = "rotateX(90deg)";
pageIndex --;
var prevPage = document.getElementById("page" + pageIndex);
prevPage.style.webkitTransform = "rotateX(0deg)";
prevPage.style.transform = "rotateX(0deg)";
};
nextButton.onclick = function(){
if(pageIndex == 6){
return false;
}
var curPage = document.getElementById("page" + pageIndex);
curPage.style.webkitTransform = "rotateX(-90deg)";
curPage.style.transform = "rotateX(-90deg)";
pageIndex ++;
var nextPage = document.getElementById("page" + pageIndex);
nextPage.style.webkitTransform = "rotateX(0deg)";
nextPage.style.transform = "rotateX(0deg)";
}
}
</script>
</head>
<body>
<div class="transition-box">
<div class="page-box">
<div class="page" id="page1">1</div>
<div class="page" id="page2">2</div>
<div class="page" id="page3">3</div>
<div class="page" id="page4">4</div>
<div class="page" id="page5">5</div>
<div class="page" id="page6">6</div>
</div>
</div>
<div class="change-page"><span id="prev">上一张</span><span id="next">下一张</span></div>
</body>
</html>
