爲什麼我在最新的Chrome瀏覽器中看不到-webkit-persective？

Question

的問題是在標題：

HTML：

<div class="out"> 
    <div class="in anim-photo zoom"> 
    </div> 
</div>​ 

CSS：

.in { 
    background: #d00; 
    width: 100px; height: 100px; 
    margin: 50px auto;    
} 

.out { 
    border: solid 1px #e4e4e4; 
    width: 200px; height: 200px; 
} 

.anim-photo, 
.transition { 

     -moz-transition: all 1s ease 0s; /* Firefox 4-15 */ 
     -o-transition: all 1s ease 0s; /* Opera 10.5–12.00 */ 
      transition: all 1s ease 0s, top 0, left 0; /* Firefox 16+, Opera 12.50+ */ 

      -webkit-transition: all 1s ease 0s; 
      -webkit-transform-style: preserve-3d; 
      -webkit-perspective: 500;    

} 

.zoom { 
    -webkit-transform: scale(1.6) rotateY(120deg); /* Safari 3.1+, Chrome */  
} 

這是我的代碼：http://jsfiddle.net/jBmeQ/2/

下面picuture顯示我的問題。

在，你會看到有一個觀點的權利。

我做錯了什麼？

Answer 1

-webkit-perspective應該在容器上，其中包含需要在3D中的元素。另外，-webkit-transform-style: preserve-3d;僅在將子元素添加到原始容器的子元素（在這種情況下，是紅色正方形的子視圖）時才需要。

http://jsfiddle.net/jBmeQ/3/