0

我正在使用 quickFlip,它非常棒,但我不知道如何让整个 div 翻转。用于翻转 div 的类在附加到实际 div 时不起作用,所以我尝试了 div 内的 ap 元素,高度和宽度设置为 100%,并将翻转类添加到其中,但现在我不能在里面嵌套标题。

关于如何使用 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 回答