Я не уверен, что это возможно, но я подумал, что было бы круто использовать 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?