CSS3转换无法正常使用Webkit？

Question

我想搭建一个演示，我发现Webkit应该有一个图像在一个框架的一侧，并翻转到另一个图像。相反，webkit只是决定向我展示双方的背影，镜像。任何帮助非常感谢！

小提琴：http://jsfiddle.net/sH2jZ/

CSS：

#f1_container { 
    position: relative; 
    margin: 10px auto; 
    width: 450px; 
    height: 281px; 
    z-index: 1; 
    } 
    #f1_container { 
    perspective: 1000; 
    } 
    #f1_card { 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
    } 
    #f1_container:hover #f1_card { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    box-shadow: -5px 5px 5px #aaa; 
    } 
    .face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    } 
    .face.back { 
    display: block; 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    box-sizing: border-box; 
    color: white; 
    text-align: center; 
    background-color: #aaa; 
    } 

HTML：

<div id="f1_container"> 
    <div id="f1_card" class="shadow"> 
    <div class="front face"> 
    <img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg"/> 
    </div> 
    <div class="back face center"> 
    <img src="http://blog.roblox.com/wp-content/uploads/2012/09/Mac-OS-X-10.5-Leopard.png" height="281" width="450" /> 
    </div> 
    </div> 
    </div> 

Answer 1

你已经错过了-webkit-版情侣您transform - 相关声明：

#f1_container { 
    position: relative; 
    margin: 10px auto; 
    width: 450px; 
    height: 281px; 
    z-index: 1; 
} 
#f1_container { 
    perspective: 1000; 
} 
#f1_card { 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    transition: all 1.0s linear; 
    -webkit-transition: all 1.0s linear; 
} 
#f1_container:hover #f1_card { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    box-shadow: -5px 5px 5px #aaa; 
} 
.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 
.face.back { 
    display: block; 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    box-sizing: border-box; 
    color: white; 
    text-align: center; 
    background-color: #aaa; 
} 

DEMO