0

私はquickFlipを使用していますが、それは非常にドープですが、div全体を反転させる方法がわかりません。div を反転するために使用されるクラスは、実際の div にアタッチされていると機能しないため、高さと幅を 100% に設定して div 内の ap 要素を試し、そこに反転クラスを追加しましたが、そこに見出しをネストすることはできません。

jQueryを使用してdivをフリップ可能にする方法についてのアイデアはありますか?

タイルの現在の html は次のようになります。

<div id="tile-wrap">
           <div class="size4 red fL i-projects"> 
        <h1>Project Portfolio</h1>
    </div>
            <div class="size4 orange fR i-interests">
        <h1>Career Interests</h1>
    </div>
    <div class="size4 purple fL i-resume">
        <h1>Resume</h1>
    </div>
    <div class="size4 green fR">
    </div>
    <div class="size4 x-l blue fL i-person">
        <h1>About Me</h1>
    </div>
     <div class="size4 yellow fR i-school">
        <h1>Education</h1>
    </div>
    <div id="contact" class="size2 black fL i-email">
        <h1 style="text-align:left">Contact</h1>
    </div>
  </div>

私がquickFlipで試みたのはこれでしたが、そこに見出しやその他のコンテンツを取得できません。

 <div id="tile-wrap">
    <div class="quickFlip">
         <div class="size4 red i-interests"> 
        <p class="quickFlipCta" style="height:100%;width:100%">
                <!-- this is not shown -->
                <h1>Project Portfolio</h1>
             </p>
         </div>
         <div class="size4 red">
          <p class="quickFlipCta" style="height:100%;width:100%"> 
              <h1>Provide Info Here</h1>
              <!-- this is not shown and niether is the heading above -->
              This might contain a list or something.
          </div>
    </div>
     </div>

これにより、タイル全体がフリップ可能になりますが、見出しを使用できなくなり、ap 要素にネストできないものがたくさんあると思われるため、それらも使用できません。

解決策はありますか？なぜclass="quickFlipCta"が divで機能しないのだろうか。もしそうなら、それはさらに驚くべきことです。

4

1 に答える 1

0

CSS3 アニメーションと 3d 変換を介して反転を行うようにしてください。これははるかにスムーズで、jQuery ほど多くのリソースを必要としません。

次のページをご覧ください。

于 2012-12-01T09:35:22.560 に答える