CSS3關於變換動畫的問題

這些天我正在學習CSS3功能。我試圖實現card flipping的效果。（jsfiddle）CSS3關於變換動畫的問題

這是代碼。

html, body{ 
    margin: 0; 
    padding: 0; 
    background-color: #ccc; 
} 

.container{ 
    position: relative; 
    width: 300px; 
    height: 500px; 
    margin: 5% auto; 
    perspective: 500px; 
} 

#card{ 
    width: 100%; 
    height: 100%; 
    background-color: #567890; 
    -webkit-animation: flip 1s; 
    transform-style: preserve-3d; 
    position: relative; 
} 

@-webkit-keyframes flip{ 
    0% { transform: rotateY(0deg); } 
    100% { transform: rotateY(180deg); } 
} 

.front, .back{ 
    position: absolute; 
    backface-visibility: hidden; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

#card .front { 
    background: red; 
} 
#card .back { 
    background: blue; 
    transform: rotateY(180deg); 
}

和HTML。

<div class="container"> 
    <div id="card"> 
     <figure class="front">1</figure> 
     <figure class="back">2</figure> 
    </div> 
/div>

這裏有問題。

該div有兩面，正面和背面。過渡應該從正面到背面。但在這個節目中，正面回報。
正面和背面的位置不正確。他們應該在div卡內。

有人可以幫助我嗎？非常感謝！

來源

2014-10-10 nich

[這]（ http://stackoverflow.com/questions/25104850/flipping-card-issue/25105063#25105063）是不是像一個像重複，但是關於實施類似的效果，因此在這裏添加鏈接的評論供您參考。那裏的樣本可能會幫助你。對於第二個問題，只需在'.front'和'.back'中添加'margin：0'。 – Harry 2014-10-10 09:10:41

[這裏]（http://jsfiddle.net/hari_shanx/rb6L94zL/1/）是基於在前面的評論中鏈接的答案修改的小提琴的一個版本。邏輯基本上保持不變。背面最初旋轉180度，並使用「Z-index」定位在正面下方，效果與「懸停」相反以產生翻轉效果。 – Harry 2014-10-10 09:24:28

，而不是旋轉你.card你爲什麼不rotate的front和backdiv反之亦然

JS Fiddle

添加關鍵幀front和back DIV旋轉

@-webkit-keyframes front { 
    0% { 
     transform: rotateY(0deg); 
    } 
    100% { 
     transform: rotateY(180deg); 
    } 
} 
@-webkit-keyframes back { 
    0% { 
     transform: rotateY(-180deg); 
    } 
    100% { 
     transform: rotateY(0deg); 
    } 
}

來源

2014-10-10 17:34:46

你真棒。現在我做了一些改變。我使用一個按鈕來控制它並切換效果。該鏈接是http://jsfiddle.net/e3k32upg/但它有什麼問題。請幫幫我！！ – nich 2014-10-11 02:43:51

檢查這個http://jsfiddle.net/victor_007/e3k32upg/1/ – 2014-10-11 04:14:22

這個工程。但是，效果有點奇怪。旋轉看起來不是很自然。 – nich 2014-10-11 06:20:13

CSS3關於變換動畫的問題

回答

相關問題