Question

我正在使用quickFlip并且它是超级涂料但我无法弄清楚如何让整个div翻转。用于翻转div的类在附加到实际div时不起作用，所以我在div中尝试了一个高度和宽度设置为100％的p元素并将翻转类添加到那个但是现在我不能在其中嵌套标题。

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

这会使整个瓷砖翻转，但现在我不能有任何标题，我认为有很多东西你不能在p元素中嵌套，所以我也不能这样使用它们。

任何解决方案？我想知道为什么 class =“quickFlipCta”对div不起作用。如果确实如此，那将更加惊人。

Answer 1

您应该尝试通过CSS3动画和3D变换进行翻转。这更顺畅，不需要像jQuery那样多的资源。

看看这些页面：

如何让整个div翻转？

1 个答案: