为什么我在最新的Chrome中看不到-webkit-perspective？

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/

下面的图片显示了我的问题。

在右边你会看到有一个观点。

我做错了什么？

Answer 1

-webkit-perspective应位于包含需要3D格式的元素的容器中。此外，只有在将子元素添加到原始容器的子元素时才需要-webkit-transform-style: preserve-3d;（在这种情况下，是红色方块的子视图）。

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