title: Need Help to flip the div in css3
body: <p>I am trying to flip the div vertically from front side to back side and then restore it .But when I hover instead of flipping it is folded into a thin strip.What is the problem?
  [The horizontal flip was working fine.Problem occured when I changed it to vertical flip]</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  
      /* entire container, keeps perspective */
  .flip-container {
      perspective: 1000;
  }
      /* flip the pane when hovered */
      .flip-container:hover .flipper, .flip-container.hover .flipper {
          transform: rotateX(180deg);
      }
  
  .flip-container, .front, .back {
      width: 320px;
      height: 480px;
  }
  
  /* flip speed goes here */
  .flipper {
      transition: 0.6s;
      transform-style: preserve-3d;
  
      position: relative;
  }
  
  /* hide back of pane during swap */
  .front, .back {
      backface-visibility: hidden;
  
      position: absolute;
      top: 0;
      left: 0;
  }
  
  /* front pane, placed above back */
  .front {
      z-index: 2;
      background-color:red;
  }
  
  /* back, initially hidden pane */
  .back {
      transform: rotateY(180deg);
      background-color:green; 
  }
  .vertical.flip-container {
      position: relative;
  }
  
      .vertical .back {
          transform: rotateX(180deg);
      }
  
      .vertical.flip-container .flipper {
          transform-origin: 100% 213.5px; /* half of height */
      }
  
      .vertical.flip-container:hover .flipper {
          transform: rotateX(-180deg);
      }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="flip-container" ontouchstart="this.classList.toggle('hover');"&gt;
      &lt;div class="flipper"&gt;
          &lt;div class="front"&gt;
              Front Side
          &lt;/div&gt;
          &lt;div class="back"&gt;
              Back Side
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>