5

チュートリアルを使用してCSS3とjQueryを使用してフリップカード効果を作成していますが、コンテンツの長さを中央の水平方向に反転させたまま、高さをコンテンツの長さに調整するのに問題があります。

フィドル。

コード：

<div class="flip"> 
    <div class="card"> 
        <div class="face front"> 
            Front<br> Other text.<br> Other text.<br> Other text.<br> Other text.
        </div> 

        <div class="face back"> 
            Back
        </div> 
    </div> 
</div> 

body {
 background: #ccc;   
}
.flip {
  -webkit-perspective: 800;
   width: 400px;
   height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotatex(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.flip .card .back {
  -webkit-transform: rotatex(-180deg);
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
}​

$('.flip').click(function(){
    $(this).find('.card').addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});​

</ p>

4

2 に答える 2

18

.back 位置を絶対位置にし、高さを 100% にすることで、だますことができます。.front の相対位置はそのままにします。

.front  {position: relative;}
.back       {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

一部のシナリオで役立つ可能性があることに注意してください。ヘッダーとフッターの 2 つの追加要素を背面に追加し、フッターの位置を絶対にして下 0 に設定します。

于 2013-12-14T12:05:55.530 に答える
6

これはjsFiddleの実用的なソリューションです。

JS:

$('.flip').click(function(){
    $(this).find('.card').addClass('flipped');
    return false;
}).mouseleave(function () {
    $('.flip > .card').removeClass('flipped');
});

var frontHeight = $('.front').outerHeight();
var backHeight = $('.back').outerHeight();

if (frontHeight > backHeight) {
    $('.flip, .back').height(frontHeight);
}
else if (frontHeight > backHeight) {
    $('.flip, .front').height(backHeight);
}
else {
    $('.flip').height(backHeight);
}

定義された高さは柔軟ではないため、表示されているのは定義したものです。高さは一定に保たれないため、前面または背面には、最も高い要素に一致する高さを定義する必要があります。この例で.frontは、 の方が高くなっ.backているため、同じ高さになるように更新され、中央で垂直方向の反転効果を実現できます。

あなたの例ではmouseleave、アニメーション中に要素が発生している間にイベントが発生する可能性があります。これが発生することを望んでいないと想定したため.flipped、カードを離れるときにロジックを削除するように更新しました。これにより、アニメーション全体で高さが維持されます。また、冗長性を減らすために CSS をクリーンアップしました。お役に立てれば！

于 2012-10-22T01:00:40.453 に答える