title: When I use CSS3 to scale an iframes contents I get ALMOST the right result
body: <p>I have used the following code to display miniature, live versions of other websites inside of one site:</p>
  
  <pre><code>iframe {
      -moz-transform: scale(0.25, 0.25); 
      -webkit-transform: scale(0.25, 0.25); 
      -o-transform: scale(0.25, 0.25);
      -ms-transform: scale(0.25, 0.25);
      transform: scale(0.25, 0.25); 
      -moz-transform-origin: top left;
      -webkit-transform-origin: top left;
      -o-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      border: solid #ccc 10px;
      width:1024px;
      height:768px;
  }
  </code></pre>
  
  <p>It seems that the height and width properties are also scaled, so I have made them the size of my monitor (which is also 4 times the size I want them to be displayed). This results in the iframe being 256px by 192px but taking up space on the page as if it was 1024px by 768px. I have solved this by defining the size of the iFrames wrapper.</p>
  
  <p>My question is, why, if it has scaled an object, does it still take up its original space?</p>