css3规模周围的空白

前端之家收集整理的这篇文章主要介绍了css3规模周围的空白前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个小问题,我想修复,但找不到任何好的答案:

当我在一个div(包含其他div)使用一个scale,它留下的空白周围,从“原始”的宽度和我的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:第一个pic是当我不添加scale-thumb类

解决方法

解决方案是将元素包装在容器中,并在调整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 */
}

猜你在找的CSS相关文章