Расширение элемента Div из его центра с помощью CSS

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

Решение: манипулирование полями

Ключ к достижению этого центрированного расширения заключается в перемещении полей div с использованием определенного формула. Этот метод включает в себя вычисление разницы между целевым размером и исходным размером и деление результата на два. Это значение затем применяется в качестве отрицательной поправки при переходе.

Параметры настройки:

В зависимости от желаемого поведения доступны три основных параметра:

Вариант 1: сохранение пространства

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

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: 55px; /* calculated as initial margin - ((width change and height change)/2) */
}

Вариант 2: переопределение окружающих элементов

Установив отрицательные поля, этот параметр приводит к тому, что элемент div расширяется на близлежащие элементы, перекрывая их содержимое.

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

Вариант 3. Смещение окружающих элементов

Этот вариант смещает элемент div и перемещает последующие элементы вниз по потоку документа.

#square {
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    top: -50px; /* calculated as initial top - ((new height - initial height)/2) */
    left: -50px; /* calculated as initial left - ((new width - initial width)/2) */
    margin-right: -50px;
    margin-bottom: -50px;
}

Примечание: Эти расчеты применимы к квадратным элементам div. Для неквадратных элементов расчеты корректировок полей могут незначительно отличаться в зависимости от желаемого пропорционального изменения размера.