<!-- CONTROLS -->
      
    <input type="radio" checked id="radio-front" name="select-face"/>    
    <input type="radio" id="radio-left" name="select-face"/>
    <input type="radio" id="radio-right" name="select-face"/>
    <input type="radio" id="radio-top" name="select-face"/>
    <input type="radio" id="radio-bottom" name="select-face"/>
    <input type="radio" id="radio-back" name="select-face"/>

<div class="separator"></div>


<div class="space3d">
        
    
    <div class="_3dbox">
      <div class="_3dface _3dface--front"></div>
      <div class="_3dface _3dface--top"></div>
      <div class="_3dface _3dface--bottom"></div>
      <div class="_3dface _3dface--left"></div>
      <div class="_3dface _3dface--right"></div>
      <div class="_3dface _3dface--back"></div>
    </div>
    
</div>

<div class="separator"></div>
<br><br>

<a class="twitter" target="_blank"  href="https://twitter.com/chinchang457">@chinchang457</a>

<div>Image credits: <a target="_blank" href="http://da-art-work.blogspot.in/">Parag Gour (my brother)</a></div>

@import "compass/css3";

// toggle the cube dimensions here.
$cubeWidth: 250px;
$cubeHeight: 250px;
$cubeDepth: $cubeHeight;

body {
  color: #333;
  padding: 20px;
  text-align: center;
  font-family: Arial;
}

.separator {
  margin-top: 40px;
}
  
.twitter {
  color: #FFF;
  text-decoration: none;
  border-radius: 4px;
  background: #00ACED;
  display: inline-block;
  padding: 10px 8px;
  margin-bottom: 15px;
  font-weight: bold;
}

/* 3D Cube */
.space3d {
	perspective: 1000px;
	width: $cubeWidth;
	height: $cubeHeight;
	text-align: center;
	display: inline-block;
}

._3dbox {
	display: inline-block;
	transition: all 0.85s cubic-bezier(0.175,0.885,0.320,1.275);

  text-align: center;
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
}

._3dface {
	overflow: hidden;
	position: absolute;
  
	border: 1px solid #888;
	background: #FFF;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1),
 0 0 50px rgba(0, 0, 0, 0.3);
  color: #333;
  line-height: $cubeWidth;
  opacity: 0.8;
}


._3dface--front {
  width: $cubeWidth;
  height: $cubeHeight;
  transform: translate3d(0, 0, $cubeDepth / 2);
}
  
._3dface--top {
  width: $cubeWidth;
  height: $cubeDepth;
  transform: rotateX(90deg) translate3d(0, 0, $cubeHeight / 2);
}

._3dface--bottom {
  width: $cubeWidth;
  height: $cubeDepth;
	transform: rotateX(-90deg) translate3d(0, 0, $cubeHeight / 2);
}

._3dface--left {
	width: $cubeDepth;
  height: $cubeHeight;
  left: 50%;
  margin-left: -$cubeDepth / 2;
  transform: rotateY(-90deg) translate3d(0, 0, $cubeWidth / 2);
}


._3dface--right {
  width: $cubeDepth;
  height: $cubeHeight;
  left: 50%;
  margin-left: -$cubeDepth / 2;
	transform: rotateY(90deg) translate3d(0, 0, $cubeWidth / 2);
}


._3dface--back {
  width: $cubeWidth;
  height: $cubeHeight;
	transform: rotateY(180deg) translate3d(0, 0, $cubeDepth / 2);
}

#radio-left:checked ~ .space3d ._3dbox {
  transform: rotateY(90deg); 
}
  
#radio-right:checked ~ .space3d ._3dbox {
  transform: rotateY(-90deg); 
}
  
#radio-bottom:checked ~ .space3d ._3dbox {
  transform: rotateX(90deg); 
}

#radio-top:checked ~ .space3d ._3dbox {
  transform: rotateX(-90deg); 
}
  
#radio-back:checked ~ .space3d ._3dbox {
  transform: rotateY(180deg); 
}

  // Apply backgrounds
  ._3dface--front {
  background: url(https://2.bp.blogspot.com/-JxKfUObT4L8/UYYaRhRNJmI/AAAAAAAAAUY/243IlIOKj2c/s320/brahama.jpg);
  background-size: 100%;
}
  
  ._3dface--left {
  background: url(https://4.bp.blogspot.com/-HGFGdCGFTkw/UXVq6PNmS4I/AAAAAAAAAUE/hBNmVCOVlu4/s400/durga+wm.jpg);
  background-size: auto 100%;
}
  
   ._3dface--right {
  background: url(https://2.bp.blogspot.com/-yrnBD8wJ-g0/UNRtPF8pR7I/AAAAAAAAATE/YSpLvqTNyoQ/s320/A+P+J+abdul+kalam_+swm+.jpg);
  background-size: auto 100%;
}
  
   ._3dface--top {
  background: url(https://3.bp.blogspot.com/-mySu8dy4ux4/ULiVKS4YBbI/AAAAAAAAAR0/vBMi_4dAPDE/s400/rajiv+dixit+s.jpg);
  background-size: auto 100%;
}
  
   ._3dface--bottom {
  background: url(https://2.bp.blogspot.com/-B9QWFtc9bVY/UHFs7y9GqkI/AAAAAAAAARI/YLDkoHYr3g4/s400/Gau+wm.jpg);
  background-size: auto 100%;
}
  
  ._3dface--back {
  background: url(https://3.bp.blogspot.com/-ofufG97PpiU/UBzXu-1AisI/AAAAAAAAAP0/iDnhOh-vrb8/s400/shiv+ji.jpg);
  background-size: auto 100%;
}