var myIndex=1;
function next(){
var myPage=document.getElementById("page"+myIndex);
myPage.style.webkitTransform="rotateX(-90deg)";
myIndex++;
var nextPage=document.getElementById("page"+myIndex);
nextPage.style.webkitTransform="rotateX(0deg)";
}代码没错 怎末实现不了
function next(){
var myPage=document.getElementById("page"+myIndex);
myPage.style.webkitTransform="rotateX(-90deg)";
myIndex++;
var nextPage=document.getElementById("page"+myIndex);
nextPage.style.webkitTransform="rotateX(0deg)";
}代码没错 怎末实现不了
.experiment{
width:400px;
height:200px;
background-color:#0fc;
border:2px solid #000;
margin:100px 400px;
animation:change 4s linear .5s both;
}
.page{perspective:1000px;perspective-origin:200px 200px;}
@keyframes change{
100%{transform:rotateY(-180deg);transform-origin:left;}
}
其实火狐只需要这样就可以3D了
width:400px;
height:200px;
background-color:#0fc;
border:2px solid #000;
margin:100px 400px;
animation:change 4s linear .5s both;
}
.page{perspective:1000px;perspective-origin:200px 200px;}
@keyframes change{
100%{transform:rotateY(-180deg);transform-origin:left;}
}
其实火狐只需要这样就可以3D了
2016-11-27
#experiment{
-webkit-perspective:800;
-moz-perspective:800;
perspective:800;
-webkit-perspective-origin:50% 50%;
-moz-perspective-origin:50% 50%;
perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
-moz-transform-style:-webkit-preserve-3d;
transform-style:preserve-3d;
}
火狐没有效果吗?
-webkit-perspective:800;
-moz-perspective:800;
perspective:800;
-webkit-perspective-origin:50% 50%;
-moz-perspective-origin:50% 50%;
perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
-moz-transform-style:-webkit-preserve-3d;
transform-style:preserve-3d;
}
火狐没有效果吗?
2016-11-25