pehaa/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */


.container {
margin:100px auto;
  width: 200px;
  height: 50px;
  position: relative;
  perspective: 2000px;
overflow:hidden;
}


#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  display:block;
  text-align:center;
  line-height:50px;
  color:#fff;

}


#cube span {
background:pink;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  transition:all 1s;
}
#cube span {background:pink; color:red}
#cube span  { transform: rotateY(   0deg ) translateZ( 25px ); }
#cube:after {content:"This is a link"; background:red;  width: 100%;
  height: 100%;
  display: block;
  position: absolute;transform: rotateX( -90deg ) translateZ( 25px );}

#cube { transform: translateZ( -25px ); }

#cube:hover
 { transform: translateZ( -25px ) rotateX(   90deg ); }
 #cube:hover span {background:red; color:pink}
#cube { transition: transform .6s; }


## dabblet.html
<!-- content to be placed inside <body>…</body> -->


<section class="container">
  <a href="#" id="cube">
    <span class="front">This is a link</span>

  </a>
</section>


## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/












	.container {
	margin:100px auto;
	width: 200px;
	height: 50px;
	position: relative;
	perspective: 2000px;
	overflow:hidden;
	}


	#cube {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	display:block;
	text-align:center;
	line-height:50px;
	color:#fff;

	}


	#cube span {
	background:pink;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	transition:all 1s;
	}
	#cube span {background:pink; color:red}
	#cube span { transform: rotateY( 0deg ) translateZ( 25px ); }
	#cube:after {content:"This is a link"; background:red; width: 100%;
	height: 100%;
	display: block;
	position: absolute;transform: rotateX( -90deg ) translateZ( 25px );}

	#cube { transform: translateZ( -25px ); }

	#cube:hover
	{ transform: translateZ( -25px ) rotateX( 90deg ); }
	#cube:hover span {background:red; color:pink}
	#cube { transition: transform .6s; }
	<!-- content to be placed inside <body>…</body> -->











	<section class="container">
	<a href="#" id="cube">
	<span class="front">This is a link</span>

	</a>
	</section>