Webkit 3D透視錯誤

Question

我最近在瀏覽器中玩耍，現在我正在與3D戰鬥。 WebGL很棒，我也可以在CSS3中做3D嗎？更好！好吧，我的願景是使用嵌套變換（使用preserve-3d）創建浮動3D對象。

HTML

<div class="scene"> 
    <div class="box"> 
     <div class="side_1"></div> 
     <div class="side_2"></div> 
     <div class="side_3"></div> 
     <div class="side_4"></div> 
     <div class="side_5"></div> 
     <div class="side_6"></div> 
    </div> 
    <div class="box"> 
     <div class="side_1"></div> 
     <div class="side_2"></div> 
     <div class="side_3"></div> 
     <div class="side_4"></div> 
     <div class="side_5"></div> 
     <div class="side_6"></div> 
    </div> 
    <div class="box"> 
     <div class="side_1"></div> 
     <div class="side_2"></div> 
     <div class="side_3"></div> 
     <div class="side_4"></div> 
     <div class="side_5"></div> 
     <div class="side_6"></div> 
    </div> 
    <div class="box"> 
     <div class="side_1"></div> 
     <div class="side_2"></div> 
     <div class="side_3"></div> 
     <div class="side_4"></div> 
     <div class="side_5"></div> 
     <div class="side_6"></div> 
    </div> 
</div> 

CSS（我使用prefixfree）

.scene { 
    perspective: 3500; 
    perspective-origin: 25% 100%; 
    animation: spin 15s infinite linear; 
    transform-style: preserve-3d; 
    width: 960px; 
    height: 350px; 
    margin: 80px auto; 
} 

.box { 
    width: 150px; 
    height: 180px; 
    position: absolute; 
    transform-style: preserve-3d; 
    top: 40px; 
} 
.box div { 
    width: 150px; 
    height: 180px; 
    opacity: 0.75; 
    background-color: #bada55; 
    position: absolute;  
} 
.box .side_1 { 
    transform: rotateY( 0deg) translateZ(75px);  
    background-color: #FF0; 
} 
.box .side_2 { 
    transform: rotateX(180deg) translateZ(75px); 
    background-color: #F00; 
} 
.box .side_3 { 
    transform: rotateY( 90deg) translateZ(75px);  
    background-color: #CCC; } 
.box .side_4 { 
    transform: rotateY(-90deg) translateZ(75px); 
    background-color: #000; 
} 
.box .side_5 { 
    height: 150px; 
    width: 150px; 
    background-color: #00a2ff; 
    transform: rotateX( 90deg) translateZ(75px); } 
.box .side_6 { 
    height: 150px; 
    background-color: #00a2ff; 
    width: 150px; 
    transform: rotateX(-90deg) translateZ(105px); } 
.box:first-child { 
    position: absolute; 
    top: 40px; 
} 
.box:last-child { 
    right: 0; 
} 
.box:nth-child(2) { 
    background: url(../img/dot.jpg) repeat-y center center transparent; 
    transform: translateZ(-600px); 
    left: 480px; 
} 
.box:nth-child(3) { 
    background: url(../img/dot.jpg) repeat-y center center transparent; 
    transform: translateZ(600px); 
    left: 480px; 
} 

@keyframes spin { 
    0% { transform: rotateY(0); }  
    100% { transform: rotateY(360deg); } 
} 

一切設置完畢後，和作品。但是等等，發生了什麼？爲什麼遠處的物體比靠近的物體大？我不明白。它是Webkit的錯誤，還是我錯過了什麼？

http://stretchbox.org/projects/Nextgen/floaters.php - 在這裏你有一個例子。

Answer 1

.scene也在旋轉，所以您需要將透視圖和透視圖來源應用於其父項，在您的情況下這將是正文。

body { 
    perspective: 3500; 
    perspective-origin: 25% 100%; 
} 

這裏你可以看到一個演示：

http://jsfiddle.net/dw58P/embedded/result/

尼斯項目的方式！