Question

我有jquery在某些情况下添加一个类来扩展div：

$("#wrapper").addClass("doubleDiv");

css：

.doubleDiv{ transform: scale(2); }

#wrapper { height:100%; position:relative; z-index:2; background-color:#111;  max-width:320px; min-height:480px; margin:0px auto; }

它的大小加倍，但div的内容会从浏览器的顶部向上移动，因此隐藏了大约前三分之一，并且无法进一步向上滚动。

我逐个删除#wrapper中的每个样式，直到没有剩下。除了搞乱布局外，在执行比例时也会发生同样的事情。

为了消除我的任何jquery导致它的机会，我编码了

    alert('stop1');
    $("#wrapper").addClass("doubleDiv");
    alert('stop2');

显示'stop2'之前出现显示问题。

还有什么可能导致这种情况？

干杯

Answer 1

变换比例缩放对象到位。使用transform-origin定义您想要缩放的位置。由于缩放根本不会影响定位，默认缩放点为center centre，因此它会移出屏幕。检查以下代码，看看它是如何解决这个问题的：

<html>
    <head>
    <style type="text/css">
    #div {
        -webkit-transform: scale(2,2); 
        -webkit-transform-origin: top left;
        background: red; 
        width: 100px; 
        height: 100px; 
    }
    </style>
    </head>
    <body>
        <div id="div"></div>
    </body>
</html>

Answer 2

<强> Demo

您需要添加transform-origin

CSS

.doubleDiv {
    transform: scale(2);
    transform-origin:50% 0%;
    -ms-transform-origin:50% 0%;/* IE 9 */
    -webkit-transform-origin:50% 0%; /* Chrome, Safari, Opera */
}

css scale在这个div上奇怪地工作

2 个答案: