<div class="wrapper w1">
  <h1><code>perspective: 1000px</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
wrapper {
			  width: 50%;
			  float: left;
			  
			}

			.w1 {
			  perspective: 1500px;
			}

			.wrapper h1 {
			  text-align: center;
			}

			.cube {
			  font-size: 4em;
			  width: 2em;
			  margin: 1.5em auto;
			  transform-style: preserve-3d;
			  transform: rotateX(0deg) rotateY(0deg);transition: 1s all linear;

			}
			.cube:hover{
				transform: rotateX(-40deg) rotateY(32deg);
			}

			.side {
			  position: absolute;
			  width: 2em;
			  height: 2em;
			  
			  background: #58AC58;
			  border: 1px solid rgba(0,0,0,.5);


			  
			  color: black; 
			  text-align: center;
			  line-height: 2em;
			}

			.front  { transform:                  translateZ(1em); }
			.top    { transform: rotateX( 90deg)  translateZ(1em); }
			.right  { transform: rotateY( 90deg)  translateZ(1em); }
			.left   { transform: rotateY(-90deg)  translateZ(1em); }
			.bottom { transform: rotateX(-90deg)  translateZ(1em); }
			.back   { transform: rotateY(-180deg) translateZ(1em); }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.