Разверните div из середины вместо верхнего и левого, используя CSS

Я не уверен, возможно ли это, но я подумал, что было бы здорово использовать CSS-преобразования, чтобы создать эффект, когда div расширяется от его центра до заданной высоты и ширины, а не только от верхнего левого угла.

Например, если у меня есть ( демо)

<div id="square"></div>

и (префиксы поставщиков для краткости опущены)

#square {
    width: 10px;
    height: 10px;
    background: blue;
    transition: width 1s, height 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
}

При наведении это увеличит квадрат вправо и снизит его до 100 пикселей. Я хотел бы, чтобы это расширилось с середины.

Я знаю, что я мог бы использовать transform: scale(x) ( демо), но на самом деле это не дает мне очень "идеальный по пикселям" макет (так как он основан на процентах), а также не влияет на окружающий макет (настройте другие элементы, находящиеся в потоке документов, на его изменение размера). По сути, это то, что я хочу сделать, за исключением того, что поток документов затронут соответствующим образом.

Кто-нибудь знает способ сделать это без JavaScript?

Источник

4 ответа

Решение

Ключ заключается в том, чтобы перевести маржу по формуле. Есть небольшая "покачивание", которая раздражает во время перехода, если он плавает.

ИЗМЕНЕННЫЕ ДОБАВЛЕНИЕ ВАРИАНТОВ

Вариант 1. Расширение в пределах пространства, зарезервированного вокруг него http://jsfiddle.net/xcWge/14/:

#square {
    width: 10px;
    height: 10px;
    margin: 100px; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
    margin: 55px; /* initial margin - (width change (and/or height change)/2), so here 100px is initial margin, and the change is (100px final W/H - 10px initial W/H = 90px change, so 100px - (90px / 2 [= 45px]) = 55px) */
}

Вариант 2: Расширяется над элементами вокруг него http://jsfiddle.net/xcWge/18/:

#square {
    width: 10px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    margin: -50px; /* 0 - (110px - 10px [= 100px]) / 2 =  -50px */
}

Вариант 3. Расширяет элементы перед ним в потоке и смещает элементы после него http://jsfiddle.net/xcWge/22/:

#square {
    width: 10px;
    height: 10px;
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    top: -50px; /* initial top[0] - (new height[110px] - initial height[10px] [=100px])/2 [=50px] = -50px) */
    left: -50px; /* initial left[0] - (new width[110px] - initial width[10px] [=100px])/2 [=50px] = -50px) */
    margin-right: -50px;
    margin-bottom: -50px;
}

ДОБАВЛЕННЫЙ НЕ КВАДРАТНЫЙ ПРИМЕР

Был сделан комментарий, что это не работает для неквадрат (одинаковая ширина / высота), но это просто означает, что нужно по-разному подстраиваться для каждого направления во время перехода. Итак, вот вариант 2 (с не квадратом), который начинается как прямоугольник, а ширина увеличивается в два раза по сравнению с высотой (поэтому изменяется даже форма прямоугольника) во время перехода: расширяется над элементами вокруг него http://jsfiddle.net/xcWge/2131/

#rectangle {
    width: 110px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#rectangle:hover {
    width: 310px;
    height: 110px;
    margin: -50px -100px; /* initial margin - ((initial margin - width change (or height change))/2) */
}

Если width менялись только на 100px (то есть с 110px до 210px), тогда просто margin: -50px все равно работал бы.

Источник

Вы должны будете изменить его положение, чтобы сделать это, установив его на относительный / абсолютный и изменив top значение, как оно оживляет.

(редактировать на основе комментариев)

Вместо абсолютного позиционирования вы можете попытаться сделать то же самое с отрицательным верхним полем. Это будет держать его в потоке документов. Тем не менее, каким-то образом вам нужно переместить элемент div, а также анимировать высоту / ширину.

Источник

Вам, возможно, придется установить абсолютное положение деления, а затем отрегулировать левое и верхнее положение при наведении. Пример jsFiddle

Источник

Я делаю это, регулируя верхнее и левое выравнивание при наведении курсора. Пример: я добавлю 50 пикселей к ширине и переместу его влево на 25 пикселей, чтобы получить общий эффект расширения от середины.

Источник
Другие вопросы по тегам