benoitboucart · December 15, 2016 18:59
diff --git a/dabblet.css b/dabblet.css
 /**
 * CSS3 3D Hover effects [1]
 * See tutorial on http://webbb.be/blog/little-css3-3d-hover-effects/
 */
 
 body {
 	background: #f06;
 	background: linear-gradient(45deg, #f06, red);
 	min-height: 100%;
 }

 .sm {text-align: center;margin: 5em 0 0 0;padding:0;list-style:none;}

 .sm a {;
   background: url(http://webbb.be/themes/webbb/images/sm3d.png) no-repeat #2e8198; 
   background-position: 0 0;
   height: 27px; width: 27px; 
   display: inline-block; 
   transform: perspective(1000);
   transform-style: preserve-3d; 
   transition: all 400ms ease;
 }

 .sm a:hover {
   background-position: 0 -27px;
   transform: rotate(-90deg);
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <ul class="sm">
   <li><a href="https://twitter.com/benoitboucart" target="_blank"></a></li>
 </ul>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* CSS3 3D Hover effects [1]
	* See tutorial on http://webbb.be/blog/little-css3-3d-hover-effects/
	*/

	body {
	background: #f06;
	background: linear-gradient(45deg, #f06, red);
	min-height: 100%;
	}

	.sm {text-align: center;margin: 5em 0 0 0;padding:0;list-style:none;}

	.sm a {;
	background: url(http://webbb.be/themes/webbb/images/sm3d.png) no-repeat #2e8198;
	background-position: 0 0;
	height: 27px; width: 27px;
	display: inline-block;
	transform: perspective(1000);
	transform-style: preserve-3d;
	transition: all 400ms ease;
	}

	.sm a:hover {
	background-position: 0 -27px;
	transform: rotate(-90deg);
	}
	<!-- content to be placed inside <body>…</body> -->
	<ul class="sm">
	<li><a href="https://twitter.com/benoitboucart" target="_blank"></a></li>
	</ul>