Untitled

dabblet.css

#c
{

	left: 50%;
	perspective: 230px;
	perspective-origin: 50% 80%;
	position: absolute;
	top: 50%;
}
#c>div
{
	height: 100px;
	position: absolute;
	transform: rotate3d(0, 1, 0, -50deg);
	transform-origin: 50% 50% 50%;
	transform-style: preserve-3d;
	transition: 1s all;
	width: 100px;
}
#c>div>div
{
	background: red;
	border: 10px dotted blue;
	border-radius: 25px;
	height: 100px;
	position: absolute;
	transform-origin: 0 0 0;
	transform-style: preserve-3d;
	width: 100px;
}
#i1
{
	transform: rotate3d(1, 0, 0, 90deg);
}
#i2
{
	transform: rotate3d(0, -1, 0, 90deg);
}
#i3
{
	transform-origin: 0,0, 0;
}
html:hover #c>div
{
	transform: translate3d(50px,100px,-500px) rotate3d(7, -3, 5, 200deg);
}

dabblet.html

<div id="c">
	<div>
		<div id=i1></div>
		<div id=i2></div>
		<div id=i3></div>
	</div>
</div> 

settings.json

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