Question

The question is in title:

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 */    
}

This my code: http://jsfiddle.net/jBmeQ/2/

Below picuture shows my problem.

In the right you’ll see there is a perspective.

What did I do wrong?

Answer 1

-webkit-perspective should be on the container which contains the elements that need to be in 3D. Also, -webkit-transform-style: preserve-3d; is only needed when you add child elements to a child of the original container (in this case, a child view of the red square).

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