<div class="contenedor">
	<input id="left" type="radio" name="mov">
	<input id="right" type="radio" name="mov">
	<input id="top" type="radio" name="mov">
	<input id="bottom" type="radio" name="mov" checked>
	<div class="img"></div>
</div>

<p>Click and navigate</p>
html, 
body{
	height:100%;
}

body{
	background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/black_lozenge.png) repeat;
	font-family: monospace;
}

#left,
#right,
#top,
#bottom{
	position:absolute;
	z-index:10;
}

#left,
#right{
	margin-top:-20px;
	top:50%;
}

#top,
#bottom{
	left:50%;
	margin-left:-20px;
}

#left{
	left:-60px;
}

#right{
	right:-60px;
}

#top{
	top:-60px;
}

#bottom{
	bottom:-60px;
}
 
.contenedor{
	border-radius:100%;
	border:10px solid rgba(50,50,50,.5);
	box-shadow:0px 0px 5px rgba(0,0,0,.5), inset 0px 0px 10px rgba(0,0,0,.5);
	position:absolute;
	top:50%;
	left:50%;
	margin:-150px 0 0 -150px;
	width:300px;
	height:300px;
	perspective:1000;
	transform-style: preserve-3d;
}

/* zona activa */

.contenedor:after{
	/*background: rgba(255,255,0,.5);*/
	border-radius:100%;
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	margin:-220px 0 0 -220px;
	width:440px;
	height:440px;
}

.contenedor:hover > input{
	opacity:1;
}

.img{
	background:url(https://dl.dropbox.com/u/96062/tira_mini.jpg);
	background-position:0px 0px; 
	border-radius:100%;
	width:100%;
	height:100%;
	transform:rotateY(0deg) rotateX(0deg) translateZ(0);
	transition:transform 1s cubic-bezier(.5,0,.35,1.39);
}

input[type="radio"] {
  background: rgba(100,100,100,.5);
  border-radius:100%;
	box-shadow: 0px 0px 2px rgba(0,0,0,1);
	cursor:pointer;
  display: block;
	opacity:0;
  outline:0;
  width:40px;
	height:40px;
	appearance: none;
	transition:opacity .2s;
}
	
input[type="radio"]:checked {
  background: rgba(255,255,0,1);
	box-shadow: inset 0px 0px 2px rgba(0,0,0,1);
}

input#left:checked ~ .img{
	transform:rotateY(-360deg) rotateX(0deg);
	background-position:300px 0px;
}

input#right:checked ~ .img{
	transform:rotateY(360deg) rotateX(0deg);
	background-position:600px 0px;
}

input#top:checked ~ .img{
	transform:rotateY(0deg) rotateX(360deg);
	background-position:900px 0px;
}

input#bottom:checked ~ .img{
	transform:rotateY(0deg) rotateX(-360deg);
	background-position:1200px 0px;
}

p{
	color:#888;
	line-height:4em;
  margin-left:2em;
  width:300px;
}
// inspiration https://tympanus.net/codrops/2013/01/28/flipping-circle-slideshow/

// photographs - http://www.flickr.com/photos/marcobarria/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js