大神們，為什么我的代碼一點一點寫出來，在谷歌瀏覽器是這樣的??？？
大神們，為什么我的代碼一點一點寫出來，在谷歌瀏覽器是這樣的??？？
慕雪8309092
2019-10-22
3 回答
舉報
0/150
提交
取消
2020-07-27
半年了，不清楚你解決沒有。
這個問題，很明顯3D場景創建失敗。
也就是說很大幾率是敲錯碼了。
你的錯誤代碼>>>>>>transform: preserve-3d;
正確屬性為>>>>>>>transform-style:?preserve-3d;
transform 主要用于轉換效果：旋轉、傾斜、縮放、移動等。
transform-style 用于定義被嵌套元素在 3D 空間中如何顯示。
還是太粗心些了。
還有，你的代碼太冗余，太亂，兼容寫 -webkit- 就夠了，-moz-, -o-, Opera、Firefox現在的版本已經兼容 -webkit- 寫法了。至于 Safari 也就稍微注意下部分 -webkit- 何其他瀏覽器寫法的不同。
也就是說，僅僅寫?transform:; 和 -webkit-transform:; 這樣就夠了。
2019-10-22
火狐和edge瀏覽器3d效果沒有谷歌和360好。但是，谷歌和360出現了如截圖的問題。請問應該怎么辦？？
我嘗試過加z-index，但是還是兼容性不好。容易出問題。
喲沒有哪個大神來指導指導？
2019-10-22
<!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>