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

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

Например, если у меня (demo)

<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) (demo), но это на самом деле не дает мне очень "идеального" пикселя (макет) поскольку он основан на процентах), а также не влияет на окружающий макет (сделать другие элементы, которые находятся в потоке документа, отрегулированы на его изменение размера). Это, по сути, то, что я хочу сделать, за исключением того, что поток документов затронут соответствующим образом.

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

Ответы

Ответ 1

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

ДОПОЛНИТЕЛЬНЫЕ ДОПОЛНИТЕЛЬНЫЕ ВАРИАНТЫ

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

#square {
    width: 10px;
    height: 10px;
    margin: 100px; /*for centering purposes*/
    background: blue;
    -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; /* inital margin - ((intial margin - width (or height))/2) */
}

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

#square {
    width: 10px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    background: blue;
    -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; /* inital margin - ((intial margin - width (or height))/2) */
}

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

#square {
    width: 10px;
    height: 10px;
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    background: blue;
    -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; /* inital top- (intial top-height)/2) */
    left: -50px; /* inital left- (intial left-width)/2) */
    margin-right: -50px;
    margin-bottom: -50px;
}

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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