css3规模周围的白色空间

Question

我有一个小问题我想解决,但找不到任何好的答案:

当我在div(包含其他div)上使用刻度时,它会在我的div的"原始"宽度和高度周围留下白色空间:

如何在缩放时删除div周围的空间？

如果需要我可以使用js!

编辑:这是一些代码:

HTML

<div class="pull-right nextpack">

                    <div class="quarter scale-thumb">

                        <div class="up">
                            <div class="inner" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="face">
                            <div class="top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            <div class="bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="cote-droit">
                            <div class="inner">
                                <div class="cote-droit-top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                                <div class="cote-droit-bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            </div>
                        </div>

                    </div>


                </div>

CSS (你真的不需要知道包是怎么做的,它是很多css3什么都没有,基本上只是倾斜,旋转,缩放以从平面模板进行3D渲染)

.quarter.scale-thumb
{
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}

PS:第一张照片是我不添加scale-thumb类的时候

Answer 1

解决方案是将元素包装在容器中,并在scale()完成时调整其大小

Jsfiddle演示:http://jsfiddle.net/2KxSJ/

相关代码是:

#wrap
{
    background:yellow;
    height:66px;
    width:55px;
    padding:10px;
    float:left;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}

#wrap:hover
{
    height:300px;
    width:260px;
}

.quarter
{
    padding:20px;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    background:red;
    width:250px;
    -webkit-transform-origin:left top;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}


#wrap:hover .quarter
{
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    /* more transform-origin */
}

Answer 2

如何transform工作原理是:

1. 你的元素被渲染
2. 你的元素被转换(移动,旋转,缩放)
3. 其他元素留在他们渲染的地方 - 围绕"原始元素"

所以白色空间实际上就是首先渲染元素的方式.

如果要以不同方式呈现元素的大小并让周围的元素响应它,则应该在CSS中使用width和height.

或者您可以使用类似javascript的东西来调整大小.

Answer 3

解决了 margin-bottom 的问题（如果缩小的话，它会是负值）：

#container {
  display: inline-block;
  border: 3px solid blue;
}

#content {
  --scale: 0.5;

  width: 200px;
  height: 200px;
  background: lightgreen;
  transform: scale(var(--scale));
  transform-origin: top left;
  margin-bottom: calc((var(--scale) - 1) * 100%);
}

<div id="container">
  <div id="content"></div>
</div>

Answer 4

我遇到了这个问题，我以这种方式解决了它，我使用了 SCSS 以免代码中重复相同的数字。下面的代码只是随着缩放比例的减小向右移动元素，以便重新对齐它。

$originalWidth: 100px;
$rate: 0.5;

parent {
  width: $originalWidth;
}

parent > div {
  transform: scale(1);
}

parent:hover {
  width: $originalWidth*$rate;
}

parent:hover > div {
  transform: translateX(($originalWidth * ($rate - 1))/2) scale($rate); /* the order matters*/
}

calc()如果您愿意，您可以仅使用 CSS 变量和 来摆脱 SCSS 。

Answer 5

我像你这样解决了我的问题。

我有一个主容器，我想减少它

我的CSS： .grid-container.full { transform: scale(0.6); transform-origin: top center; }

但是我的容器底部的边距更大。然后我这样做：

$mainGrid = $('.grid-container.full') $mainGrid.css('height', $mainGrid.height() * .6);