title: Creating a box flap open effect using only CSS
body: <p>I tried to create this effect using transitions. It should look like you are opening a box.</p>
  
  <p>There are 2 problems:</p>
  
  <ol>
  <li>The order in which the box closes is same as in which it opens. Is there anyway to close the box in reverse order of its opening so that the box goes back in the same state it was when closed? <br></li>
  <li>The ends of the green and yellow flaps are hidden during transition because of the red and blue flaps, so it doesn't look 3D. Is there a way I can show all flaps in 3D way?</li>
  </ol>
  
  <p>I would prefer if the solution was in pure CSS , no JavaScript please.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
    position: relative;
    top: 170px;
    left: 170px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    perspective: 800px;
  } 
  #flap1, #flap2, #flap3, #flap4 {
    position: absolute;
  }
  #flap1 {
    background-color: red;
    width: 150px;
    height: 300px;
    z-index: 1;
    transform-origin: 0 0;
    transition: transform 1s;
  }
  #flap2 {
    left: 150px;
    background-color: blue;
    width: 150px;
    height: 300px;
    z-index: 1;
    transform-origin: 100% 0;
    transition: transform 1s ease 0.3s;
  }
  #flap3 {
    background-color: green;
    width: 300px;
    height: 150px;
    transform-origin: 0 0;
    transition: transform 1s ease 0.6s;
  }
  #flap4 {
    background-color: yellow;
    top: 150px;
    width: 300px;
    height: 150px;
    transform-origin: 0 100%;
    transition: transform 1s ease 0.9s;
  }
  #box:hover #flap1{
    transform: rotateY(-170deg);
  }
  #box:hover #flap2{
    transform: rotateY(170deg);
  }
  #box:hover #flap3{
    transform: rotateX(170deg);
  }
  #box:hover #flap4{
    transform: rotateX(-170deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="box"&gt;
        &lt;div id="flap1"&gt;&lt;/div&gt;
        &lt;div id="flap2"&gt;&lt;/div&gt;
        &lt;div id="flap3"&gt;&lt;/div&gt;
        &lt;div id="flap4"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>