如何翻轉div並在正面和背面顯示不同大小的內容？

Question

我正在嘗試創建一個div「flipcard」元素，它在正面和背面包含不同大小的內容。

的HTML：

<div class="flipcard"> 
    <div class="face front">Front</div> 
    <div class="face back">Back ... put some long text here ... </div> 
</div> 

的JavaScript只是添加和刪除一個 「翻轉」 類：

$('.flipcard').click(function(e) { 
    var $card = $(this); 
    if ($card.hasClass("flipped")) $card.removeClass('flipped'); 
    else $card.addClass('flipped'); 
}); 

所有魔法發生在CSS：

.flipcard { 
    margin: 1em auto; 
    width: 80%; 
    /* I don't want to set the height because 
     we don't know the size of the content */ 
    border: solid 1em white; 
    border-radius: 0.5em; 
    font-family: Georgia; 
    -webkit-perspective: 800; 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: 0.5s; 
    cursor: pointer; 
} 
.flipcard:hover { 
    box-shadow: 0 0 1em black; 
} 
.flipcard.flipped { 
    -webkit-transform: rotatey(-180deg); 
} 
.flipcard .face { 
    padding: 1em; 
    text-align: center; 
    -webkit-backface-visibility: hidden; 
} 
.flipcard .front { 
    background: #220000; 
    color: white; 
} 
.flipcard .back { 
    background: #66eeff; 
    color: black; 
    -webkit-transform: rotateY(180deg); 
} 

的jsfiddle： http://jsfiddle.net/luken/qdBEV/ 正如你所看到的，來自前方的內容是干涉機智h的背部，並且他們都將鰭片伸展至組合高度。我希望前臺能夠展示其內容的適當高度，並且要顯示內容的適當高度。我已經嘗試製作臉部position: absolute，並讓它們從display: none到display: block在每個翻轉...但沒有什麼工作正確。

任何想法？

Answer 1

添加適當display:none;和display:block;

演示：http://jsfiddle.net/qdBEV/3/

CSS：

body { 
    background: #bbb; 
} 
.flipcard { 
    perspective: 800; 
    -moz-perspective: 800; 
    -webkit-perspective: 800; 
    margin: 1em auto; 
    width: 80%; 
    border: solid 1em white; 
    border-radius: 0.5em; 
    font-family: Georgia; 
    transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    transition: 0.5s; 
    -moz-transition: 0.5s; 
    -webkit-transition: 0.5s; 
    cursor: pointer; 
} 
.flipcard:hover { 
    box-shadow: 0 0 1em black; 
} 
.flipcard.flipped { 
    transform: rotatey(-180deg); 
    -moz-transform: rotatey(-180deg); 
    -webkit-transform: rotatey(-180deg); 
} 
.flipcard .face { 
    padding: 1em; 
    text-align: center; 
    backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 
.flipcard .front { 
    background: #220000; 
    color: white; 
    display: block; /* added to fix the problem */ 
} 
.flipcard.flipped .front { 
    display:none; /* added to fix the problem */ 
} 
.flipcard .back { 
    background: #66eeff; 
    color: black; 
    transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    display:none; /* added to fix the problem */ 
} 
.flipcard.flipped .back { 
    display:block; /* added to fix the problem */ 
} 

Answer 2

我不得不實施工作，也許這個帖子這個問題，並會幫助別人，所以這裏是我想出了什麼（見jsfiddle）。首先，我的要求比翻轉div有更多的高度面。此外：

1. 翻轉卡下方有內容需要平滑上下移動（例如，另一個CSS翻轉），同時卡翻轉以適應不同的人臉高度。
2. 內容on臉部以及翻蓋卡片的上下都必須堅持頁面的響應式設計，換句話說，卡片不能有任何固定的CSS尺寸和絕對定位。
3. 支持所有主流瀏覽器，但只支持最新版本。

HTML是相同的問題 - 一個「卡」有兩個「面」：

<div class="flipcard"> 
    <div class="flipcard-front"> 
    <h1>Front</h1> 
    <p>some shorter content</p> 
    </div> 
    <div class="flipcard-back"> 
    <h1>Back</h1> 
    <p>some long content</p> 
    ... 
    </div> 
</div> 

CSS（看起來令人生畏，但實際上只是一對夫婦減線）：

.flipcard { 
    position: relative; 
    height: auto; 
    min-height: 0px; 
    /* Flip card styles: WebKit, FF, Opera */ 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
     -o-perspective: 800px; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
     -o-transform-style: preserve-3d; 
    -webkit-transition: min-height 1s ease-out 0s, -webkit-transform 1s ease-out 0.5s; 
    -moz-transition: min-height 1s ease-out 0s, -moz-transform 1s ease-out 0.5s; 
     -o-transition: min-height 1s ease-out 0s, -o-transform 1s ease-out 0.5s; 
    /* only height adjustment for IE here */ 
     -ms-transition: min-height 1s ease-out 0s; 
} 
/* The class that flips the card: WebKit, FF, Opera */ 
.flipcard.card-flipped { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
     -o-transform: rotateY(180deg); 
} 
.flipcard .flipcard-front, 
.flipcard .flipcard-back { 
    top: 0; 
    left: 0; 
    width: 100%; 
    /* backface: all browsers */ 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
      backface-visibility: hidden; 
    /* Flip card styles: IE 10,11 */ 
    -ms-perspective: 800px; 
    -ms-transform-style: flat; 
    -ms-transition: -ms-transform 1s ease-out 0.5s; 
} 
.flipcard .flipcard-front { 
    position: relative; 
    display: inline-block; 
    -webkit-transform: rotateY(0deg); 
     -ms-transform: rotateY(0deg); 
     -o-transform: rotateY(0deg); 
      transform: rotateY(0deg); 
} 
.flipcard .flipcard-back { 
    position: absolute; 
    display: none; 
     -ms-transform: rotateY(180deg); 
     -o-transform: rotateY(180deg); 
      transform: rotateY(180deg); 
    /* webkit bug: https://bugs.webkit.org/show_bug.cgi?id=54371, 
     You need this fix if you have any input tags on your back face */ 
    -webkit-transform: rotateY(180deg) translateZ(1px); 
} 
/* The 2 classes that flip the faces instead of the card: IE 10,11 */ 
.flipcard .flipcard-front.ms-front-flipped { 
    -ms-transform: rotateY(180deg); 
} 
.flipcard .flipcard-back.ms-back-flipped { 
    -ms-transform: rotateY(0deg); 
} 

注：不幸的是IE瀏覽器的最新版本仍然處理CSS旋轉不同於所有其他的，因爲它需要每個臉是flipp單獨編輯而不是翻轉包含它們的卡片。儘管webKit瀏覽器，FF和Opera似乎「理解」了這一點，但我希望這些瀏覽器具有最大的向後兼容性，因此所有這些醜陋的瀏覽器前綴混亂（谷歌爲大衛沃爾什在翻轉卡上的偉大帖子）。其次，我希望舊版瀏覽器至少能夠顯示正確的內容，因此不可見（背面）必須是display: none，而可見面必須是display: block-inline，以避免頁面上方和下方的內容出現摺疊頁邊距。第三，可以通過控制牌min-height屬性而保留height: auto（credit）來實現翻牌後內容的移動。在輪換之前稍稍運行一下這個轉換就可以讓它變得非常流暢。

最後，使用Javascript：

function flipCard() { 
    var card = $('.flipcard'); 
    var front = $('.flipcard-front'); 
    var back = $('.flipcard-back'); 
    var tallerHight = Math.max(front.height(), back.height()) + 'px'; 
    // visible/invisible *before* the card is flipped ;D 
    var visible = front.hasClass('ms-front-flipped') ? back : front; 
    var invisible = front.hasClass('ms-front-flipped') ? front : back; 
    var hasTransitioned = false; 
    var onTransitionEnded = function() { 
     hasTransitioned = true; 
     card.css({ 
      'min-height': '0px' 
     }); 
     visible.css({ 
      display: 'none', 
     }); 
     // setting focus is important for keyboard users who might otherwise 
     // interact with the back of the card once it is flipped. 
     invisible.css({ 
      position: 'relative', 
      display: 'inline-block', 
     }).find('button:first-child,a:first-child').focus(); 
    } 

    // this is bootstrap support, but you can listen to the browser-specific 
    // events directly as well 
    card.one($.support.transition.end, onTransitionEnded); 

    // for browsers that do not support transitions, like IE9 
    setTimeout(function() { 
     if (!hasTransitioned) { 
      onTransitionEnded.apply(); 
     } 
    }, 2000); 

    invisible.css({ 
     position: 'absolute', 
     display: 'inline-block' 
    }); 

    card.css('min-height', tallerHight); 
    // the IE way: flip each face of the card 
    front.toggleClass('ms-front-flipped'); 
    back.toggleClass('ms-back-flipped'); 
    // the webkit/FF way: flip the card 
    card.toggleClass('card-flipped'); 
} 

此應用類翻轉卡/面。在轉換過程中，背面有一個position: absolute，因此在卡轉動時它是可見的。同時，卡的高度已經過渡。在過渡結束時，可見面部返回到position: relative，並且卡的高度被解除限制而留下響應頁面。

希望這有助於 - 抱歉這個漫長的職位，這是我第一次:)