大神们，为什么我的代码一点一点写出来，在谷歌浏览器是这样的啊？？
大神们，为什么我的代码一点一点写出来，在谷歌浏览器是这样的啊？？
慕雪8309092
2019-10-22
3 回答
半年了，不清楚你解决没有。
这个问题，很明显3D场景创建失败。
也就是说很大几率是敲错码了。
你的错误代码>>>>>>transform: preserve-3d;
正确属性为>>>>>>>transform-style: preserve-3d;
transform 主要用于转换效果：旋转、倾斜、缩放、移动等。
transform-style 用于定义被嵌套元素在 3D 空间中如何显示。
还是太粗心些了。
还有，你的代码太冗余，太乱，兼容写 -webkit- 就够了，-moz-, -o-, Opera、Firefox现在的版本已经兼容 -webkit- 写法了。至于 Safari 也就稍微注意下部分 -webkit- 何其他浏览器写法的不同。
也就是说，仅仅写 transform:; 和 -webkit-transform:; 这样就够了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 3D</title>
<style>
#my3dspace{
-webkit-perspective:800;
-moz-perspective:800;
-ms-perspective:800;
-o-perspective:800;
perspective:800;
-webkit-perspective-origin:50% 50%;
-moz-perspective-origin:50% 50%;
-ms-perspective-origin:50% 50%;
-o-perspective-origin:50% 50%;
perspective-origin:50% 50%;
overflow: hidden;
}
#pagegroup{
width:400px;
height:400px;
margin:0 auto;
-webkit-transform:-webkit-preserve-3d;
-moz-transform:-moz-preserve-3d;
-ms-transform:-ms-preserve-3d;
-o-transform:-o-preserve-3d;
transform:preserve-3d;
position:relative;
}
.page{
width:360px;
height:360px;
padding:20px;
background-color:black;
color:white;
font-weight:bold;
font-size:360px;
line-height:360px;
text-align:center;
position:absolute;
}
#page1{
-webkit-transform-origin:bottom;
-moz-transform-origin:bottom;
-ms-transform-origin:bottom;
-o-transform-origin:bottom;
transform-origin:bottom;
-webkit-transition:-webkit-transform 1s linear;
-moz-transition:-moz-transform 1s linear;
-ms-transition:-ms-transform 1s linear;
-o-transition:-o-transform 1s linear;
transition:transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6{
-webkit-transform-origin:bottom;
-moz-transform-origin:bottom;
-ms-transform-origin:bottom;
-o-transform-origin:bottom;
transform-origin:bottom;
-webkit-transition:-webkit-transform 1s linear;
-moz-transition:-moz-transform 1s linear;
-ms-transition:-ms-transform 1s linear;
-o-transition:-o-transform 1s linear;
transition:transform 1s linear;
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
-ms-transform:rotateX(90deg);
-o-transform:rotateX(90deg);
transform:rotateX(90deg);
}
#op{
text-align:center;
margin:40px auto;
}
</style>
<script type="text/javascript">
var curIndex=1;
function next(){
if(curIndex==6)
return;
var curPage=document.getElementById("page"+ curIndex);
curPage.style.webkitTransform="rotateX(-90deg)";
curPage.style.mozTransform="rotateX(-90deg)";
curPage.style.msTransform="rotateX(-90deg)";
curPage.style.oTransform="rotateX(-90deg)";
curPage.style.Transform="rotateX(-90deg)";
curIndex ++;
var nextPage=document.getElementById("page"+curIndex);
nextPage.style.webkitTransform="rotateX(0deg)";
nextPage.style.mozTransform="rotateX(0deg)";
nextPage.style.msitTransform="rotateX(0deg)";
nextPage.style.oTransform="rotateX(0deg)";
nextPage.style.Transform="rotateX(0deg)";
}
function prev(){
if(curIndex==1)
return;
var curPage=document.getElementById("page"+ curIndex);
curPage.style.webkitTransform="rotateX(90deg)";
curPage.style.mozTransform="rotateX(90deg)";
curPage.style.msTransform="rotateX(90deg)";
curPage.style.oTransform="rotateX(90deg)";
curPage.style.Transform="rotateX(90deg)";
curIndex --;
var prevPage=document.getElementById("page"+curIndex);
prevPage.style.webkitTransform="rotateX(0deg)";
prevPage.style.mozTransform="rotateX(0deg)";
prevPage.style.msitTransform="rotateX(0deg)";
prevPage.style.oTransform="rotateX(0deg)";
prevPage.style.Transform="rotateX(0deg)";
}
</script>
</head>
<body>
<div id="my3dspace">
<div id="pagegroup">
<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 id="op">
<a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a>
</div>
</body>
</html>
举报
0/150
提交
取消
