3

だから私はほとんどこのように反転画像を作成する必要があります。

しかし、違いは、複数のボタンが必要で、それぞれが特定の面に反転する場合です。1、2、3、4 のラベルが付いた 4 つのボタンが必要で、4 つの異なるカードの面が必要で、それぞれの色が対応する番号に対応しているとします。したがって、ページは面 1 が表示された状態で読み込まれ、ボタン 1 をクリックしても何も起こりませんが、ボタン 3 をクリックすると、数字 3 を示す面に切り替わります。

4

1 に答える 1

9

シンプルなソリューション

質問で言及したオンラインの例と同じアプローチから始めますが、回転を開始する前に、「裏側」の内容を、回転させて表示したい要素の内容に置き換えます。

各要素のコンテンツは、HTML に個別に格納し、必要なときに取得する必要があります。

<div class="container">
    <div class="card">
        <div class="face face1"></div>
        <div class="face face2"></div>
    </div>

    <ul class="store">
        <li>
            <div class="content content1">1</div>
        </li>
        <li>
            <div class="content content2">2</div>
        </li>
        <li>
            <div class="content content3">3</div>
        </li>
        <li>
            <div class="content content4">4</div>
        </li>
    </ul>
</div>

jQuery デモ

デモは、Firefox、Safari、および Chrome の最近のすべてのバージョンで正常に動作するはずです。

IE10 はこのbackface-visibilityプロパティを完全にはサポートしていないようです (-ms-プレフィックスの有無にかかわらず)。これにより、デモとオンラインの例の両方が IE10 で正しく動作しなくなります。

于 2013-03-12T00:52:58.060 に答える