Question

当我克隆我的

时

<div id="orig" class="content">this is just some content</div>

并将其附加到较小的固定大小的容器中，使其适合使用css

#clone {
    transform: translate(...) scale(...)
}

然后这与原始的白色空间包裹混淆，即使刻度使得元素在原始的空白包裹下完美匹配。

我知道为什么会这样，但我需要找到一种方法来避免它。

换句话说：

鉴于小提琴http://jsfiddle.net/JAS2K/5/

我需要红色#badwrap1看起来像下面的灰色#desiredwrap（即具有相同的空白包装），即使它是固定大小容器的子项。

Answer 1

jsFiddle Demo

稍微更改了您的DOM和CSS并且它正在运行。

<强> HTML：

<div id="container1" class="content scaled">
    this is just some content
</div>

<强> CSS：

.content {
    background-color:#DDD;
    width:100px;
    height:100px;
    min-height:40px;
}
#container1 {
    display:inline-block;
    background-color:red;
}
.scaled {
    -webkit-transform:translate(-25%, 0) scale(0.5, 1);
    transform: translate(-25%, 0) scale(0.5, 1);
}

如何在css-transform scale操作上保持空白包装

1 个答案: