2013-04-06 69 views
1

我想搭建一個演示,我發現Webkit應該有一個圖像在一個框架的一側,並翻轉到另一個圖像。相反,webkit只是決定向我展示雙方的背影,鏡像。任何幫助非常感謝!CSS3轉換無法正常使用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> 

回答

3

你已經錯過了-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

+0

真棒,謝謝! – 2013-04-06 18:02:46