如何翻转div并在正面和背面显示不同大小的内容？

我正在尝试创建一个div“flipcard”元素，它在正面和背面包含不同大小的内容。如何翻转div并在正面和背面显示不同大小的内容？

的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在每个翻转...但没有什么工作正确。

任何想法？

来源

2014-01-12 Luke

添加适当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 */ 
}

来源

2014-01-12 06:37:04 Arbel

这似乎引起了一个问题，“返回”侧不再点击。（在Chrome 31.0.1650.63中测试了你的jsfiddle） – Luke

@Luke在这里很好，相同的Chrome版本31.0.1650.63 m – Arbel

我不得不实施工作，也许这个帖子这个问题，并会帮助别人，所以这里是我想出了什么（见jsfiddle）。首先，我的要求比翻转div有更多的高度面。此外：

翻转卡下方有内容需要平滑上下移动（例如，另一个CSS翻转），同时卡翻转以适应不同的人脸高度。
内容on脸部以及翻盖卡片的上下都必须坚持页面的响应式设计，换句话说，卡片不能有任何固定的CSS尺寸和绝对定位。
支持所有主流浏览器，但只支持最新版本。

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，并且卡的高度被解除限制而留下响应页面。

希望这有助于 - 抱歉这个漫长的职位，这是我第一次:)

来源

2014-12-09 07:40:57 Kenta

如何翻转div并在正面和背面显示不同大小的内容？

回答

相关问题