1

ユーザーがカードの裏を見てクリック アンド ドラッグし、ホット スポット (ここでは黒いバー) をクリックしてカードを裏返すことができるカード フリップ機能を設定しました。

カードの裏面を示す部分を除いて、すべて機能します。反転アニメーションが発生します。空白です。

どんな助けでも大歓迎です！

私はここにいる...

ここに機能のフィドルがあります。

HTML

<div id="flipStage">
    <div class="card" id="bsg">
        <div class="front" id="bsgFront"></div>
        <div class="back" id="bsgBack"></div>
        <div class="flipButton"></div>
        <div class="handle"></div>
    </div>
</div>

CSS

.flipStage {
    position: relative;
    float: left;
    width:100%;
    height:100%;
}
.card {
    cursor: pointer;
    height:175px;
    width:125px;
    position:absolute;
    -webkit-transition: -webkit-transform .5s;
    -moz-transition: -moz-transform .5s;
    -o-transition: -o-transform .5s;
    transition: transform .5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    -o-perspective: 300px;
    perspective: 300px;
}
.flipped {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform:rotateY(180deg);
}
.card .front, .card .back {
    display: block;
    position:absolute;
    height:100%;
    width:100%;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -o-backface-visibility: hidden;
    backface-visibility:hidden;
}
#bsg {
    top:150px;
    left:150px;
}
#bsgFront {
    background-image:url(http://images.penguinmagic.com/images/products/original/8006b.jpg);
    background-repeat:no-repeat;
    background-size: 100%;
}
#bsgBack {
    background-image:url(http://images2.fanpop.com/image/photos/9400000/Tricia-Helfer-BSG-Promotional-Photography-tricia-helfer-9422601-1089-1450.jpg);
    background-repeat:no-repeat;
    background-size: 100%;
}
.flipButton {
    height: 20px;
    width: 100%;
    position: absolute;
    top:0;
    right:0;
    background-color:black;
}
.handle {
    position:absolute;
    width: 100%;
    height: 100%;
    top: 20px;
}
4

1 に答える 1

3

http://jsfiddle.net/gJaCP/3/

バックの初期状態を 180 度反転させる必要があります。

.back {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

反転しているのがわかるように、少しテキストを追加しました。リダイレクトを使用していて、ロードされていないと思われるため、別の背面画像を試してください。私のリンクでは、再びフロントを使用しました。

私は BG を 50% に設定しました。

http://jsfiddle.net/gJaCP/4/

http://davidwalsh.name/css-flip

于 2013-03-28T17:27:08.067 に答える