0

div ベースのフリッパーを作成します。前面と背面は現在色としてコード化されていますが、背面は最終的に背景画像になります。

私はこのガイドに従っています: http://davidwalsh.name/css-flipこれはデモではまだ動作しません。私はおそらく何か間違ったことをしました。

こちらが

HTML:

<div class="flip-container">

    <div class="flipper">

        <div class="front">

            Front

        </div>

        <div class="back">

            Back

        </div>

    </div>

</div>

CSS:

.flip-container {
    perspective:1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
     transform: rotateY(180deg);
}

.flip-container, .front, .back {
     height:480px;width:320px;
}

.flipper {
    position:relative;
}

.front {
    background:#99CCFF;
    z-index:2;
}

.back {
    background:#CCC;
    transform:rotateY(180deg);
}

.front, .back {
    backface-visibility:hidden;
    position:absolute;top:0;left:0;
}

そして素敵なjsfiddle：

http://jsfiddle.net/Ssp7L/

4

1 に答える 1

0

どのブラウザを使用しましたか？Chrome v35 を使用している場合は、transform プロパティにプレフィックスを追加する必要があります。

.flip-container {
    -webkit-perspective:1000;
}

    .flip-container:hover .flipper, .flip-container.hover .flipper {
        -webkit-transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    height:480px;width:320px;
}

.flipper {
    position:relative;
    transition: 0.6s;
}

.front {
    background:#99CCFF;
    z-index:2;
}

.back {
    background:#CCC;
    -webkit-transform:rotateY(180deg);
}

.front, .back {
    -webkit-backface-visibility:hidden;
    position:absolute;top:0;left:0;
}

デモ

于 2014-05-23T12:02:20.740 に答える