2

フリップ カードの他のいくつかの例と同様: 同様の例 1

ただし、答えは通常、含まれているカードに背景がないようにすることであり、カードの前面と背面に指定されています。ただし、これは私の例では機能しません。これは、テキストを含む背面が前面の画像と同じ高さを占めないためです。

ときどき正しく動作していましたが、ページを更新すると、再び壊れた状態に戻ります。

マイコード

.flipper{
            //transform: perspective(1000px);
            transform-style: preserve-3d;
            position: relative;
            width: 100%;
            min-height: 345px;
            transition: 0.6s;
            background-color: rgb(242,245,245);
            box-shadow: 1px 2px 20px rgba(255, 255, 255, 0.6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5);
        }

これについてはまだクロスブラウザのテストを開始していませんが、どのような種類の使用可能な (アニメーション化されていない) サポートを検討していますか?

これは他の質問と非常によく似ていると思いますが、このケースは、カードに固定の高さを宣言しないという点で十分に異なるはずであり、背景は面ではなくカード自体に適用する必要がある可能性があります

4

1 に答える 1

0

わかりましたので、jsFiddleでわかるように、それを見て、いくつかの調整を行いました。

http://jsfiddle.net/nsUZB/1/

主に、フリッパーの background-color と min-height を削除し、前面と背面に lightBlue カラーを設定しました。

.flipper{
            //transform: perspective(1000px);
            transform-style: preserve-3d;
            position: relative;
            width: 100%;
            //min-height: 345px;
            transition: 0.6s;
            //background-color: rgb(242,245,245);
            box-shadow: 1px 2px 20px rgba(255, 255, 255, 0.6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5);
        }


        .front, .back{
        backface-visibility: hidden;
        //transition: 0.6s;
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: lightBlue;
    }

これが正しい方向に進んでいるかどうか教えてください。

于 2013-07-18T15:32:14.783 に答える