Untitled

dabblet.css

a{ 
text-decoration: none;
color: #d44444;
font: bold 45px/45px verdana;
text-align: center;	
}

h1{-webkit-perspective: 800px;}
.cube {
  display: block;  position: relative;  margin: 30px auto;
  -webkit-transform-style: preserve-3d;
  -webkit-transform:  rotateY(0deg);
  height: 100%;
}
#rollover {
  position: relative;
  width: 250px;
  height: 200px;
  display: block;
  
-webkit-transform:  rotateX(0deg);

}

.front {
-webkit-backface-visibility: hidden;
z-index: 2;position: absolute;display: block;color: #33da3c;height: 100%;font-size: 75px;line-height: 70px;letter-spacing: -7px;
 -webkit-transform:  translateZ(0px);
}
.back {
z-index: 1;position: absolute;-webkit-transform: rotateY(180deg) translateZ(100px);height: 100%;font-size: 57px;font-family: "AL-Fares";line-height: 49px;padding-top: 20px;
-webkit-backface-visibility: hidden;
}


#rollover:hover .cube{
  
-webkit-transform:  rotateX(360deg);

}
#rollover:hover .front,
#rollover:focus .front {
  z-index: 1;
}

#rollover {
  position: relative;

  display: block;
}
.front {
  z-index: 2;
  position: absolute;
  background: #fff;
}
.back {
  z-index: 1;
  position: absolute;
  background: #fff;
}
#rollover:hover .back, 
#rollover:focus .back {
  z-index: 2;
}
#rollover:hover .front, 
#rollover:focus .front {
  z-index: 1;
}

dabblet.html

  <h1 class='flip box fade hideback'>
        <a href="#" id='rollover'>
        <div class='cube'>
            <p class="front jp">日本語表現文型辞典</p>
            <p class="back ar">معجم التعبيرات الياباني</p>
	</div>
         </a>
  </h1>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}