假设我有一个带有div和一个按钮的页面。当您单击按钮时,div应该放大。换句话说,如果该div为100px,则在缩放时应变为200px。并且该div的所有子级也应加倍。
最好的方法是什么?
我的理解是,有一个CSS zoom
,但仅在IE中-它不是任何CSS标准的一部分。
最佳答案
您应该使用CSS3的transform: scale()
。
请参阅:http://jsfiddle.net/Favaw/-(为方便起见,我使用jQuery,但这不是必需的)
.zoomedIn2x {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
如果需要支持IE 9之前的版本,请使用此工具生成
.zoomedIn2x
:http://www.useragentman.com/IETransformsTranslator/index.html
如果要更动态地执行此操作(例如其他级别的缩放),请使用cssSandpaper。