Белое пространство вокруг шкалы css3

У меня есть небольшая проблема, которую я хочу исправить, но не могу найти хороший ответ:

Когда я использую шкалу на div (которая содержит другие div), она оставляет пустое пространство вокруг, из "оригинальной" ширины и высоты моего div:

Как я могу удалить пространство withe вокруг div при масштабировании?

Я могу при необходимости использовать js!

EDIT: Вот какой код:

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

Ответы

Ответ 1

решение состоит в том, чтобы обернуть элемент внутри контейнера и изменить его размер, пока выполняется масштаб()

Jsfiddle demo: 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 */
}

Ответ 2

как работает transform:

ваш элемент получает рендеринг
ваш элемент преобразуется (перемещается, поворачивается, масштабируется)
Остальные элементы остаются там, где они оказываются - вокруг "исходного элемента"

поэтому пустое пространство - это просто способ, которым элемент был визуализирован в первую очередь.

Вы должны использовать width и height в CSS, если хотите визуализировать размер элементов по-разному и реагировать на него окружающими элементами.

Или вы можете использовать что-то вроде javascript для изменения размеров.

Ответ 3

Я решил свою проблему таким же образом, как и ваша.

У меня есть основной контейнер, и я хочу уменьшить его

мой css: .grid-container.full { transform: scale(0.6); transform-origin: top center; }

но у моего контейнера было большее дно поля. тогда я делаю это:

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

Ответ 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*/
}

Вы можете избавиться от SCSS, просто используя CSS-переменные и calc(), если хотите.

Ответ 5

Я решил это, добавив элемент : 1px solid transparent "к элементу, где применяется шкала.

#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;

   outline: 1px solid transparent;
}

Ответ 6

Еще одна идея для пробелов при преобразовании объектов

<div class="outer">
    <div class="inner">
        transformme
    </div>
</div>

CSS

.outer { overflow:hidden }
.inner {
    transform-origin:left top;
}

var rate = 0.5;
var outerheight = $('.inner').outerHeight()*rate;
$('.inner').css({ transform: "scale("+rate+")" });
$('.outer').css({ height: outerheight });

Также вы можете добавить другие теги браузера; -webkit-transform, -moz-transform, -o-transform