                        課程
                    
                        /前端開發
                        
                            /CSS3
                        
                        /CSS3 3D 特效

對于看不到chromaum里看不到3d效果的解決辦法

<!DOCTYPE?html>
<head>
????<title>test</title>
????<style>
????????#pagegroup{
????????????-webkit-perspective:1400px;
????????????-webkit-perspective-origin:50%?100%;

????????????width:?400px;
????????????height:?400px;
????????????margin:?0?auto;

????????????-webkit-transform-style:?preserve-3d;
????????????position:?relative;
????????}
????????.page{
????????????width:?360px;
????????????height:?360px;
????????????padding:?20px;
????????????background-color:?#000;
????????????color:?#fff;

????????????font-weight:?bold;
????????????font-size:?360px;
????????????line-height:?360px;
????????????text-align:?center;

????????????position:?absolute;
????????}
????????#page1{
????????????-webkit-transform-origin:bottom;
????????????-webkit-transition:-webkit-transform?1s?linear;
????????}
????????#page2,#page3,#page4,#page5,#page6{
????????????-webkit-transform-origin:bottom;
????????????-webkit-transition:-webkit-transform?1s?linear;
????????????-webkit-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)";

????????????curIndex++;
????????????var?nextPage=document.getElementById("page"+curIndex);
????????????nextPage.style.webkitTransform="rotateX(0deg)";
????????}

????????function?prev(){
????????????if(curIndex==1)?{return;}
????????????var?curPage=document.getElementById("page"+curIndex);
????????????curPage.style.webkitTransform="rotateX(90deg)";

????????????curIndex--;
????????????var?prevPage=document.getElementById("page"+curIndex);
????????????prevPage.style.webkitTransform="rotateX(0deg)";
????????}
????</script>
</head>
<body>
????<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?id="op">
????<a?href="javascript:next()">next</a>
????<a?href="javascript:prev()">previous</a>
</div>
</body>
</html>

看代碼可以看到去除了my3dspace的div層，并把該div層的css屬性放到pagegroup里，同時刪除overflow：hidden，以及把-webkit-perspective-origin:50% 50%;改為-webkit-perspective-origin:50% 100%;你們可以自己看下改和不改的結果區別。當時照著視頻上的做一直都沒有3d效果，就在網上查資料，找到的最大可能就是

-webkit-perspective:1400px;

-webkit-perspective-origin:50% 100%;

-webkit-transform-style: preserve-3d;

這三條css最好放在同一個div里面。
就這個代碼我在自己的chromium里已經調試成功了。