Untitled

dabblet.css

.container { 
  width: 400px;
  height: 260px;
  position: relative;
  perspective: 800px;
 background:magenta; margin: 280px auto 0;
}

#card {
  width: 100%;
  height: 50%;
  position: absolute;
  transform-style: preserve-3d;
  transition-property: transform, z-index;
  transition-duration:  .5s, 0s ;
transition-delay: 1s, .5s;
transform-origin:left top;

 z-index:1;
}
.top {background:rgba(0,0,0,.6);
position:absolute; left:0; width:100%; top:30%; height:70%; }


#card .figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0 0 40px 40px;
 
 
}

#card .front {
  background: red;
}

#card .back {
  background: blue;
  transform: rotateY( 180deg );
}
#letter {background:green; position:absolute; width:90%; left:5%; top:5%; height:95%;
transition: .5s .5s;}
#letter .foldtop {}
#letter .foldbottom {}
.container:hover #letter {top:-40%; transition:.5s .5s; }

.container:hover #card {transform : rotateX(180deg); z-index:-1; transition-delay: 0s, .5s;

   }


#fold {
  width: 100%;
  height: 70%;
  position: absolute;
  transform-style: preserve-3d;
  transition-property: transform;
  transition-duration:  .5s;
transition-delay: 0s;
transform-origin:left top;


}
#fold > div {
position:absolute;
width:100%;
height:100%;
backface-visibility: hidden;
}
.foldtop {background:orange}
.foldbottom {background:lavender; transform: rotateX(180deg)}
.container:hover #fold {transform : rotateX(180deg); transition-delay:1s }

#extra {position:absolute; z-index:1000; background:black; width:200px; height:100px; top:200px;
left:300px }

dabblet.html

<section class="container">
  
  <div id="letter">
  <div id="fold">
  	<div class="foldtop">kuku</div>
  	<div class="foldbottom">kuku</div>
  </div>
  <div class="content"></div>
  </div>
  <div class="top"></div>
  <div id="card">    
  	<div class="front figure"></div>
    	<div class="back figure"></div>
    

  </div>

</section>
<div id="extra"><a href="#">kuku</a></div>

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}