css - 为什么我在最新的 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/

下图显示了我的问题。

在右边你会看到有一个视角。

我做错了什么？

Answer 1

-webkit-perspective应该在包含需要在 3D 中的元素的容器上。此外，-webkit-transform-style: preserve-3d;仅当您将子元素添加到原始容器的子元素（在本例中为红色方块的子视图）时才需要。

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