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/ 正如您所看到的，前面的内容会干扰背面，并且它们都会将卡片拉伸到组合高度。我希望前面显示其内容的适当高度和背面以显示其内容的适当高度。我已经尝试制作面孔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更紧凑。此外：

翻转卡片下面的内容必须平稳地上下移动（例如另一个CSS过渡），同时卡片会翻转以适应不同的脸部高度。
面板上的内容以及翻转卡上方和下方的内容必须遵循页面的响应式设计，换句话说，卡片不能具有任何固定的CSS尺寸，也不能具有绝对的定位。
支持所有主流浏览器，但仅支持最新版本。

HTML与问题中的相同 - 一个＆＃34;卡＆＃34;有两个＆＃34;面孔＆＃34;：

<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（看起来令人生畏，但实际上只是几行LESS）：

.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旋转的方式与所有其他版本不同，因为它希望每个 face 单独翻转而不是翻转卡片包含它们。虽然webKit浏览器，FF和Opera似乎都能理解＆＃34;这个，我想要那些浏览器的最大向后兼容性，因此所有这些丑陋的浏览器前缀杂乱（谷歌大卫沃尔什在翻转卡上的伟大帖子）。其次，我希望旧浏览器至少显示正确的内容，因此隐形（背面）面必须为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并且卡片的高度不受限制，从而留下响应页面。

希望这会有所帮助 - 对于这篇冗长的帖子感到抱歉，这是我的第一篇：）

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

2 个答案: