我用下面的代码来显示一个站点内其他网站的缩影，现场版：
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;
}
看来，高度和宽度属性也缩放，所以我做了他们我的显示器的大小（这也是4次，我要显示它们的大小）。 这导致在iframe由192px是256PX，但占用空间的页面上，如果它是1,024像素768px。 我已经通过定义I帧封装尺寸解决了这个。
我的问题是，为什么，如果它迈上一个对象，它仍然占据其原有的空间？
一个解释
在W3C文档可帮助回答你的问题。 下面行情从何而来呢。
CSS3的变换当前的实现（据我所知）跟随前两种模式，具体的：
该调整受影响的内容的位置，而不改变其内容的正常布局变换（很像相对定位）
此外，它指出：
该模块定义了一组影响到被施加这些属性元素的视觉呈现的CSS属性; 根据从[CSS21]可视化格式模型元素已经被定尺寸和定位之后应用这些效果。
到最后报价的关键是“视觉呈现”。 也就是说，当缩放（你的情况），在视觉上改变它的外观，它不会在HTML本身的流程中更改对象的实际像素尺寸。 作为第一报价所指出的，它是一个使用很像一个元件移动position: relative其中“空间”的元素占用仍然处于其正常流动位置，但它的视觉显示可以在别处移位（由top: 100px或其他定位移）。
用于您的方案解决？
更新 ：我删除了我原来的答复在本节的测试表明它不能正常工作。 因此，有没有真正解决你的愿望。
如果我猜的话，我会说，这个CSS：
width:1024px;
height:768px;
就是这个原因。 这告诉了iframe，其尺寸为1024×768，并且，其结果是，这些尺寸的iframe报告给浏览器。 然后浏览器把iframe中，就好像它占用的空间，这个量并相应地呈现它。
为了验证，我建议使用类似Firebug在Firefox或Chrome的开发者工具的工具和检查元素的问题，看看它的报告它的尺寸是。
至于其他的答案已经注意到，CSS3变换只改变元素的视觉渲染。 但是，正如你已经意识到，你可以调整包装上，以使其他元素的地方掉下很好。
如果你希望它是一个更易于管理，你可能想尝试的Zurb响应，YouTube上的iframe的办法。 这是他们是如何做到这一点：
最简单的方法来调整大小的iframe
.flex-video {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
}
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
.flex-video iframe,
.flex-video object,
.flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top: 0; }
}
因为他们知道YouTube视频的纵横比，可以放弃了“柔性视频”包装纸高度：0; 填充底：67.5％。 内的iframe / YouTube视频给出与宽度的绝对定位：100％; 身高：100％，这自然使得它能够响应。 从这里，你可以通过设置包装尺寸控制iframe的宽度。 可以设置其它的比率到包装太像宽度：100％; 高度：0; 填充底：100％;,这基本上给你一个方盒子，以适应你的iframe成。
如果您需要使用CSS3缩放...
如果不工作，就离开CSS3缩小方法，这是一个有点混乱，需要JS。 我最近就遇到了这个问题，而试图在响应网站上使用谷歌的广告。 为了解决这个问题，我写了一个轻量级（和漂亮的未经测试） 的jQuery插件 ，使得响应由一个相对定位的div包裹元素I帧。
它使用iframe的原始宽度和相对定位包装找到多少需要使用CSS3规模下来的宽度。 随着施加CSS3缩放，它使用相同的比设定的相对定位包装器的高度。 这确保了书面的iframe下面的DOM元素上升预期。 这是所有基于iframe的原始宽度/高度比，使这些属性必须是可用的。 它仍然需要一些重构，但如果你需要也许你可以修改它，以更好地满足您的需求。
如果你需要使用或修改它，那就是：
Rad.js -自适应广告插件
