sphere 6

dabblet.css

/**sphere 6*/

body{
	height: 100%;
}

.container { 
	top:50%;
	margin:auto;
	margin-top: -100px;
	width: 200px;
	height: 200px;
	position: relative;
	perspective: 800;
}

#wrapper {
	width: inherit;
	height: inherit;
	position: absolute;
	transform-style: preserve-3d; 
}

#wrapper div{
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 50%;
 transition: all 0.4s linear;
 transform-origin: 50% 0%;

}

#wrapper .front {
  background: red;
  transition: all 0.6s ease-in-out;
}

#wrapper .back {
	 transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;

}

.container:hover #card .front{


transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;

}

.container:hover #card .back{


transform: rotate3d(1,0,0,0deg);
    opacity: 1;

}

dabblet.html

<section class="container">
  	<div id="wrapper">
    	<div class="front"></div>
    	<div class="back"></div>
  </div>
</section>

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}