title: How do I make my CSS-3D cube responsive?
body: <p>I am trying to make a responsive 3D animated cube that scales with screen size, but anytime i try to change the pixel values to a percentage value, it breaks. How would i make this cube functional and responsive? Here is my code:</p>
  
  <pre><code>@-webkit-keyframes spin-anim {
  from {
      -webkit-transform: rotateY(0);
  }
  to {
      -webkit-transform: rotateY(360deg);
  }
  }
  @keyframes spin-anim {
  from {
      transform: rotateY(0);
  }
  to {
      transform: rotateY(360deg);
  }
  }
  .cube {
  -webkit-animation: spin-anim 20s infinite linear;
  animation: spin-anim 20s infinite linear;
   transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  }
  .canvas {
  width:400px;
  height:400px;
  -webkit-perspective: 500px;
  perspective: 500px;
  margin:auto;
  
  }
  .face {
  background-color:blue;
  width:400px;
  height:400px;
  position:absolute;
  border:1px solid black;
  }
  .front {
  transform: translateZ(200px);
  -webkit-transform:translateZ(200px);
  background-image: url(../assets/logo.jpg);
  }
  .back {
  transform: rotateX(180deg) translateZ(200px);
  -webkit-transform:rotateX(180deg) translateZ(200px);
  background-image: url(http://fillmurray.com/500/500)
  }
  .top {
  transform: rotateX(90deg) translateZ(200px);
  -webkit-transform:rotateX(90deg) translateZ(200px);
  background-image: url(http://fillmurray.com/500/500)
  }
  .bottom {
  transform: rotateX(-90deg) translateZ(200px);
  -webkit-transform:rotateX(-90deg) translateZ(200px);
  background-image: url(http://fillmurray.com/500/500)
  }
  .left {
  transform: rotateY(-90deg) translateZ(200px);
  -webkit-transform:rotateY(-90deg) translateZ(200px);
  background-image: url(http://fillmurray.com/500/500)
  }
  .right {
  transform: rotateY(90deg) translateZ(200px);
  -webkit-transform:rotateY(90deg) translateZ(200px);
  background-image: url(http://fillmurray.com/500/500)
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated. Thank you in advance!</p>
  
  <p><a href="http://jsfiddle.net/n306asn3" rel="nofollow noreferrer">Fiddle</a></p>