使用CSS缩小div

Question

我有覆盖整个页面（高度和宽度均为100％）的DIV。我试图使用CSS（可能还有JavaScript）创建缩小动画效果，以便DIV更小（使div内的所有内容 - 其子项 - 也更小）到页面上的特定点（页面中间）和特定的width和height（比方说100 * 100px）。

我开始用下面的代码：

<div id="toBeZoomedOut"> 
    <div>something</div> 
    <div><img src="background.jpg"></div> 
</div> 

#toBeZoomedOut { 
    background-color: black; 
    border: 1px solid #AAAAAA; 
    color: white; 
    width: 300px; 
    height: 300px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-transition: 1s ease-in-out; 
    -moz-transition: 1s ease-in-out; 
    transition: 1s ease-in-out; 
} 

#toBeZoomedOut img { 
    height: 250px; 
    width: 250px; 
} 

#toBeZoomedOut:hover { 
    zoom: 0.5; 
} 

这段代码的问题是，它缩小的成分下来（父DIV），并立即缩小里面有什么它然后回到放大组件。

基本上它是一个小车。任何有帮助的修复方法都可以缩小一切吗？如果我可以将所有内容一起缩小到页面上的特定位置以及特定的宽度/高度（例如，将所有内容缩放到左侧：100px，顶部：100px，并且父div应该是：100px * 100px和其他一切都是相对的大小）。

我知道使用JavaScript可能会更容易吗？任何帮助？

最后一个注意事项是，如果您注意到动画并非真正反映缩放动画。虽然这将是一个额外的优点，但实际的缩放动画将非常棒。

感谢提前:)

的jsfiddle链接，使其更容易：http://jsfiddle.net/HU46s/

Answer 1

我使用的是通用选择里面的一切目标父容器的css转换应用于它。

我做的下一件事是改变了里面的内容宽度相%便于缩放。

这里是CSS：

#toBeZoomedOut * { 
    -webkit-transition: all 1s ease; 
    -moz-transition: 1s ease; 
    transition: 1s ease; 
} 

最后，小提琴：Demo

Answer 2

为了让所有图像和DIV背景的同时放大，你必须使用＃伸缩镜头，里面的元素百分比大小和设置一个特定的字体大小...

但是不光滑，如果你想要一个更流畅的结果，我建议你使用jQuery结合一些animation（）方法或插件。

小提琴：http://jsfiddle.net/HU46s/1/

代码：的jQuery

#toBeZoomedOut { 
    background-color: black; 
    border: 1px solid #AAAAAA; 
    color: white; 
    width: 300px; 
    height: 300px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 
#toBeZoomedOut div, #toBeZoomedOut img { 
    width: 90%; 
    font-size: 20px; 
} 
#toBeZoomedOut img { 
    height: 90%; 
    width: 90%; 
} 

#toBeZoomedOut:hover { 
    zoom: 0.5; 
} 

平滑：

小提琴：http://jsfiddle.net/HU46s/5/

代码： jQuery的 - 流畅的解决方案（甚至更少CSS）：

$('#toBeZoomedOut').hover(/* change the animation speed as you want :) */ 
    function(){ 
     $(this).animate({ 'zoom': 0.5}, 400); //animation speed 400=0.4s ! 
    }, 
    function(){ 
     $(this).animate({ 'zoom': 1}, 400); //animation speed 400=0.4s ! 
    } 
); 

...你需要这个只有CSS是：

#toBeZoomedOut { 
    background-color: black; 
    border: 1px solid #AAAAAA; 
    color: white; 
    width: 300px; 
    height: 300px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#toBeZoomedOut img { 
    width: 250px; 
}