ウェブキットの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/

ニースプロジェクトを！