css3范围周围的空白 [英] White space around css3 scale

问题描述

我有一个小问题，我想修复，但找不到任何好的答案：

当我在div（其中包含其他div ），它离开了我的div的原始宽度和高度：

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

如果需要，我可以使用js。

编辑：这里是一些代码：

HTML

 < div class =pull-right nextpack> 
 
< div class =quarter scale-thumb> 
 
< div class =up> 
< div class =innerstyle =background-image：url（{{URL :: base（）。'/ galery / th293x711 /'.$ nextpack-> src}}）> < / div> 
< / div> 
 
< div class =face> 
< div class =topstyle =background-image：url（{{URL :: base（）。'/ galery / th293x711 /'.$ nextpack-> src}}）> < / div> 
< div class =botstyle =background-image：url（{{URL :: base（）。'/ galery / th293x711 /'.$ nextpack-> src}}）> < / div> 
< / div> 
 
< div class =cote-droit> 
< div class =inner> 
< div class =cote-droit-topstyle =background-image：url（{{URL :: base（）。'/ galery / th293x711 /'.$ nextpack-> src}} ）>< / div> 
< div class =cote-droit-botstyle =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：第一个pic是当我不添加scale-thumb类

解决方案是将元素包装在容器内，并在调整scale（）时调整大小

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

相关代码为：

  #wrap 
 {
背景：黄色; 
 height：66px; 
 width：55px; 
 padding：10px; 
 float：left; 
 -webkit-transition：0.5s all; 
  -  moz-transition：0.5s all; 
 / *更多过渡在这里* / 
} 
 
 #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; 
 / *更多的转换在这里* / 
} 
 
 
 #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 * / 
} 
  

I have a small issue I want to fix, but can't find any good answer :

When I use a scale on a div (which contains other divs), it leave white space around, from the "original" width and height of my div :

How can I remove the withe space around the div while scaled ?

I can use js if needed !

EDIT: Here is some code :

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 (you really don't need to know how the pack is done, it's a lot of css3 for nothing, basically just skew, rotate, scale to make a 3D render from a flat template)

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

PS : The first pic is when I don't add the scale-thumb class

解决方案

solution is to wrap the element inside a container, and resize it too while the scale() is done

Jsfiddle demo: http://jsfiddle.net/2KxSJ/

relevant code is:

#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 */
}

这篇关于css3范围周围的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！