title: Full screen of cube keeping perspective intact- html css
body: <p>I am currently working on a project for which i need a cube designed below, but i need this to be in full screen without disturbing the perspective and to all browsers, tried making width and height 100% and max-width and max-height 100% but did'n help!! The html is given below. i need the same which is given below but in full screen mode.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
  &lt;title&gt;3D rotation&lt;/title&gt;
  &lt;link rel="stylesheet" href="3D_cube.css" /&gt;
  &lt;/head&gt;
  
  &lt;body class="experiment"&gt;
  &lt;script src="../jquery.js"&gt;&lt;/script&gt;
  &lt;!--&lt;script src="3D_cube.js"&gt;&lt;/script&gt;--&gt;
  
  &lt;div id="wrapper"&gt;
  
  &lt;div id="experiment"&gt;   
  &lt;div id="cube"&gt;
      &lt;div class="face one"&gt;
          Top
      &lt;/div&gt;
      &lt;div class="face three"&gt;        
      &lt;/div&gt;
      &lt;div class="face four"&gt;
      &lt;/div&gt;
      &lt;div class="face five"&gt;
      &lt;/div&gt;
      &lt;div class="face six"&gt;
          Bottom
      &lt;/div&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The corresponding stylesheet is given by </p>
  
  <pre><code>#experiment {
    width:100%;
    height:100%;
    -webkit-perspective: 700; 
    -webkit-perspective-origin: 50% 200px;
  
    -moz-perspective: 800; 
    -moz-perspective-origin: 50% 200px;
  }
  #wrapper{
          width:100%;
          height:100%;
      }
  
  #cube {
    position: relative;
    margin: 100px auto 0;
    height: 400px;
    width: 400px;
    -webkit-transition: -webkit-transform 2s linear;
    -webkit-transform-style: preserve-3d;
  
    -moz-transition: -moz-transform 2s linear;
    -moz-transform-style: preserve-3d;
  }
  
  .face {
    position: absolute;
    height: 360px;
    width: 360px;
    padding: 20px;
    background-color: rgba(50, 50, 50, 0.7);
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
  }   
  
  #cube .one  {
    -webkit-transform: rotateX(90deg) translateZ(200px);
    -moz-transform: rotateX(90deg) translateZ(200px);
  }
  
  #cube .three {
    -webkit-transform: rotateY(90deg) translateZ(200px);
    -moz-transform: rotateY(90deg) translateZ(200px);
  
  }
  
  #cube .four {
    -webkit-transform: rotateY(180deg) translateZ(200px);
    -moz-transform: rotateY(180deg) translateZ(200px);
  }
  
  #cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(200px);
    -moz-transform: rotateY(-90deg) translateZ(200px);
  }
  
  #cube .six {
    -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
    -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
  }
  </code></pre>